HTML 下拉列表项背景颜色答案

【问题标题】：HTML Dropdown list item background colorsHTML 下拉列表项背景颜色
【发布时间】：2018-07-30 10:23:42
【问题描述】：

我有一个包含项目的下拉菜单，我想使用 ODD 和 EVEN 来交替颜色。我的问题是...请问样式下拉列表项的 CSS 代码是什么？

【问题讨论】：

结帐stackoverflow.com/questions/5089442/…
正如@Shree 发布的链接中所述。如果你使用 jquery，你可以使用这样的东西 $('#mySelectList').children().filter(':even').css('background-color','red') 或者你可以使用 .addClass(' myClass') 而不是使用 .css()
@Alistair Laing - 为什么使用 jQuery？如果解决方案是使用$(...)css(...) 或$(...).addClass(...) 那么为什么不简单地使用CSS？
@Shree - 这个问题似乎无关紧要，因为它旨在改变 selected 项目的颜色。这只是为了改变赔率和偶数的背景。

标签： html css

【解决方案1】：

<!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>

【讨论】：

谢谢你 Richard JP Le Guen

【解决方案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>

【讨论】：

这不是很干，你必须为每个元素写一个 id 并将其添加到 css 中

【解决方案3】：

您可以为列表项设置默认样式，然后应用更具体的样式来更改偶数项。奇数项将获得默认样式。

.nav{
  padding: 0;
  list-style: none;
}
.nav li{
   color: #c1a404;
   background: #007e96;
   padding: 10px;
   font-size: 20px;
   font-family: Futura, sans-serif;
}
.nav li:nth-child(even) {
   color: white;
   background: dodgerblue;
}

<ul class="nav">
  <li>Home</li>
  <li>About Us</li>
  <li>News</li>
  <li>Careers</li>
  <li>Contact</li>
</ul>

【讨论】：