如何在选择标记中设置所选选项的颜色

Question

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

当select标签作为下拉列表时我可以使用它，但是当我将它作为列表框时，当我没有聚焦时，所选选项总是灰色。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

Answer 1

为此，您必须在CSS中设置background的{​​{1}}属性。

option

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

Answer 2

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

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