如何在选择选项后更改选择框的颜色

Question

我已经尝试了很多但不能这样做。我想在选择选项后向选择框显示红色背景颜色。

<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

<style type="text/css">
select:hover { 
    background:#Ff0000; 
    color : #ffffff;
}
</style>

Answer 1

试试这个：

＆＃13;

＆＃13;

var select = document.getElementById('mySelect');
select.onchange = function () {
    select.className = 'redText';
}

＆＃13;

.redText {
    background-color:#F00;
}

＆＃13;

<select id="mySelect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要使用javascript / jquery来处理选择框的更改选择事件并添加红色背景

Answer 3

<强> HTML

<select>
    <option>Select</option>
    <option selected>im selected</option>
    <option>im not</option>
    <option>me too</option>
    <option>me either</option>
</select>

<强> CSS

select { color: black; background: red; }
option:not(:checked) { background: white; }

http://jsfiddle.net/kQ6c5/

修改

http://www.w3.org/TR/selectors/#checked：

  

:checked伪类最初适用于具有HTML4 selected和checked属性

的元素

Answer 4

绝对可以，您可以使用:checked选择器

执行此操作

检查 demo jsFiddle

语法

option:checked { }

HTML

<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

CSS

option:checked { 
    background:#Ff0000; 
    color : #ffffff;
}