HTML下拉列表项目的背景色

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

已邀请:

3 个回复

使用CSS nth-child伪类：

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

穗揣

您可以将其他背景设置为：

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

矾醒忻

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

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

要回复问题请先登录或注册

HTML下拉列表项目的背景色

3 个回复

发起人

html

css

css3

问题状态

HTML下拉列表项目的背景色

与内容相关的链接

3 个回复

发起人

html

css

css3

问题状态