更改选择框选项背景颜色
更改选择框选项背景颜色
提问于 2012-10-11 17:18:14
我有一个选择框，当点击选择框并显示所有选项时，我会尝试更改选项的背景色。
body {
background: url(http://subtlepatterns.com/patterns/black_linen_v2.png) repeat;
}
select {
margin: 40px;
background: rgba(0, 0, 0, 0.3);
color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}<select>
<option val="">Please choose</option>
<option val="1">Option 1</option>
<option val="2">Option 2</option>
<option val="3">Option 3</option>
<option val="4">Option 4</option>
</select>
回答 9
Stack Overflow用户
回答已采纳
发布于 2012-10-11 17:22:16
您需要将background-color放在option标记上，而不是select标记上...
select option {
margin: 40px;
background: rgba(0, 0, 0, 0.3);
color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}如果您想样式化每一个option标记..使用css attribute选择器：
select option {
margin: 40px;
background: rgba(0, 0, 0, 0.3);
color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
select option[value="1"] {
background: rgba(100, 100, 100, 0.3);
}
select option[value="2"] {
background: rgba(150, 150, 150, 0.3);
}
select option[value="3"] {
background: rgba(200, 200, 200, 0.3);
}
select option[value="4"] {
background: rgba(250, 250, 250, 0.3);
}<select>
<option value="">Please choose</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
Stack Overflow用户
发布于 2013-03-22 05:30:42
我不知道您是否考虑过这个问题，但是如果您的应用程序基于着色各种项分组，那么您可能应该将<optgroup>标记与类结合使用，以便进一步引用。例如：
<select>
<optgroup label="Numbers" class="green">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</optgroup>
<optgroup label="Letters" class="blue">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</optgroup>
</select>然后在文档的头部编写css，如下所示：
<style type="text/css">
.green option{
background-color:#0F0;
}
.blue option{
background-color:#00F;
}
</style>Stack Overflow用户
发布于 2014-03-20 18:37:32
可以，您可以通过相反的方式进行设置：
select { /* desired background */ }
option:not(:checked) { background: #fff; }在下面检查它的工作情况：
select {
margin: 50px;
width: 300px;
background: #ff0;
color: #000;
}
option:not(:checked) {
background-color: #fff;
}<select>
<option val="">Select Option</option>
<option val="1">Option 1</option>
<option val="2">Option 2</option>
<option val="3">Option 3</option>
<option val="4">Option 4</option>
</select>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12836227
复制相关文章
相似问题