如何更改选择框选项背景颜色？ [英] How to 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.

a href =http://jsfiddle.net/mynameisdonald/dXdq6/>查看小提琴

See Fiddle

html

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

css

select{
    margin:40px;
    background: rgba(0,0,0,0.3);
    color:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,0.4);
}

推荐答案

标签上的 background-color ，而不是选择标签。 ..

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);
}

如果要对选项标签..使用css 属性选择器：

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"] { /* value not val */
    background: rgba(100, 100, 100, 0.3);
}

select option[value="2"] { /* value not val */
    background: rgba(200, 200, 200, 0.3);
}

/* ... */

这篇关于如何更改选择框选项背景颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！