2011-04-15 232 views
4

我有一個項目的下拉菜單,我想用ODD和EVEN交替顏色。 我的問題是...什麼是風格的下拉列表項的CSS代碼?HTML下拉列表項目baground顏色

感謝

+0

結賬http://stackoverflow.com/questions/5089442/changing-the在選擇框中選擇背景顏色 – 2011-04-15 13:18:26

+0

正如在@Shree發佈的鏈接中提到的那樣。如果你使用jQuery,你可以使用像這樣的$('#mySelectList')。children()。filter(':even').css('background-color','red')或者你可以使用.addClass(' myClass')而不是使用.css() – 2011-04-15 13:24:53

+0

@Alistair Laing - 爲什麼要使用jQuery?如果解決方案是使用'$(...)css(...)'或'$(...)。addClass(...)'那麼爲什麼不簡單地使用CSS? – 2011-04-15 13:27:50

回答

7

使用CSS nth-child pseudo-class

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <title>HTML Dropdown list item baground colors</title> 
    <style type="text/css"> 
     #myForm select option:nth-child(odd) { 
      color:black; 
      background:yellow; 
     } 
     #myForm select option:nth-child(even) { 
      color:white; 
      background:blue; 
     } 
     #myForm select { 
      background:green; 
      color:orange; 
     } 
    </style> 
</head> 
<body> 
    <form id="myForm" action="#" method="get"> 
     <select> 
      <option>A</option> 
      <option>B</option> 
      <option>C</option> 
      <option>D</option> 
      <option>E</option> 
      <option>F</option> 
     </select> 
    </div> 
</body> 
</html> 
2

您可以設置不同的背景爲:

#o1{background:red;} 
#o2{background:green;} 
#o3{background:#FFEA76;} 

<option id="o1">blah 1</option> 
<option id="o2">blah 2</option> 
<option id="o3">blah 3</option>