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

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

P.S。示例如下：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; }

Answer 2

fiddle

.register_account option[value=null]
{
    color:yellow;
}

阅读CSS [attribute=value] Selector

Answer 3

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

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

这应该正常工作，使用：悬停，它更容易。

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

3 个答案: