html - 如何更改所选选项中的字体颜色？

Question

我有以下 HTML 代码:

<div class="register_account">
    <form>
        <select>
            <option value="null">Select a Country</option>
            <option value="AX">Åland Islands</option>
            <option value="AF">Afghanistan</option>
            <option value="AL">Albania</option>
            <option value="DZ">Algeria</option>
        </select>
    </form>
</div>

和CSS代码:

.register_account
{ 
    background: #0023C4;
    width:62%;
    padding:1.5%;
}

.register_account form select
{ 
    width:100%;
    font-size:0.8em;
    color:#000;
    padding:8px;
    margin:5px 0;
    background: none;
    border: 1px solid #fff !important;
}

现在我想更改“选择国家/地区”和表单中“已选择”选项的文本颜色。

附言示例在这里:http://jsfiddle.net/V7C6w/ .

编辑:

解决该问题的可能解决方案可能是:

.register_account
{ 
    background: #0023C4;
    width:62%;
    padding:1.5%;
}

.register_account form select
{ 
    width:100%;
    font-size:0.8em;
    color:#fff;
    padding:8px;
    margin:5px 0;
    background: #0023C4;
    border: 1px solid #fff !important;
}

证明自己:http://jsfiddle.net/V7C6w/9/

Answer 1

这条小线将解决问题并提供我想您需要的东西

AFAIK 你想用不同的颜色显示列表中的选定元素。在这里，我对所有元素使用绿色，对默认选择使用白色，试试这个。

而且它不需要任何 java 脚本，您可以使用简单的 CSS 实现它

.register_account form option:not(:checked) { color: green; }

已编辑

//This line allows you to change the selected menu item color individually 
.register_account form option:checked { color: #0AD; }