更改选择框选项背景颜色 [英] Change select box option background color
本文介绍了更改选择框选项背景颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个选择框,当单击选择框并显示所有选项时,我试图更改选项的背景颜色.
I have a select box and I'm trying to change the background color of the options when the select box has been clicked and shows all the options.
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>
推荐答案
您需要将 background-color
放在 option
标签上,而不是 select
标签...
You need to put background-color
on the option
tag and not the select
tag...
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
选择器:
If you want to style each one of the option
tags.. use the css attribute
selector:
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>
这篇关于更改选择框选项背景颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文