如何在选择标签中设置选定选项的颜色答案

【问题标题】：How to set the color of a selected option in a select tag如何在选择标签中设置选定选项的颜色
【发布时间】：2016-07-27 17:07:09
【问题描述】：

我正在尝试在大小为 5 的选择标记中设置所选选项的颜色，以便它充当列表框。

我可以在选择标记用作下拉时工作，但是当我使一个列表框时，所选选项始终灰色，当时我未聚焦。

下面是正在发生的事情的代码示例。第一个选择标签的行为正确，但是一旦我应用了 size 属性，所选选项的颜色就会变成灰色。

select {
  margin: 40px;
  background: yellow;
  color: #000;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
option:not(:checked) {
  background-color: #FFF;
}

<select>
  <option val="">Select Option</option>
  <option val="1">Option 1</option>
  <option val="2" selected>Option 2</option>
  <option val="3">Option 3</option>
  <option val="4">Option 4</option>
</select>
<br/>
<select size="5" multiselect>
  <option val="">Select Option</option>
  <option val="1">Option 1</option>
  <option val="2" selected>Option 2</option>
  <option val="3">Option 3</option>
  <option val="4">Option 4</option>
</select>

在不同浏览器上检查 JS Fiddle 后，它似乎是正在设置的浏览器样式。

以下是来自 Chrome、Firefox 和 Internet Explorer 的图片。 chrome 和 firefox 似乎都设置了自己的值，但 Internet Explorer 不会。

【问题讨论】：

标签： jquery html css

【解决方案1】：

为此，您必须在 CSS 中设置 option 的 background 属性。

select,
select option:active,
select option:checked{
        margin:40px;
        background: yellow;
        color:#000;
        text-shadow:0 1px 0 rgba(0,0,0,0.4);
    }
    option:not(:checked) { 
        background-color: #FFF; 
    }

<select>
        <option val="">Select Option</option>
        <option val="1">Option 1</option>
        <option val="2" selected>Option 2</option>
        <option val="3">Option 3</option>
        <option val="4">Option 4</option>
    </select>
    <br/>
    <select size="5" multiselect>
        <option val="">Select Option</option>
        <option val="1">Option 1</option>
        <option val="2" selected>Option 2</option>
        <option val="3">Option 3</option>
        <option onfocus="this.style.background='red'" val="4">Option 4</option>
    </select>

【讨论】：

有什么办法可以让灰色框的文字显示为灰色以外的颜色？
@polydegmon 我看到文本是黑色的，而不是灰色的。你想改变其他颜色的颜色吗？
抱歉EddNewGate，我的意思是文本的背景仍然是灰色的，如果可能的话我希望它是黄色的
@polydegmon 我不知道你在说什么。任何地方都没有灰色背景。在我的 sn-p 中，选择框的背景是白色的，当您单击时，它会变为黄色。
我已经在 Chrome、IE 和 Firefox 中检查过了。 IE正常工作，Chrome将有一个灰色框，在未聚焦所选选项时，Firefox将具有一个蓝色框。我猜这是浏览器的行为。感谢 EddNewGate 的所有帮助

【解决方案2】：

您可以尝试在多选的情况下添加背景渐变，如下所示。不过，您需要添加属性才能使其在跨浏览器中工作。

select[multiselect] option:checked {
    background: -moz-linear-gradient(left, yellow 0%, yellow 100%);
 }

【讨论】：