所选选项的样式背景

Question

我在 jsfiddle 上有一个 select 框的代码： https://jsfiddle.net/v7tqumpe/1/

我希望能够更改 selected 选项的背景颜色。它默认为蓝色，但我想更改它以及文本的颜色。经过一番搜索，我发现 selected 选项的 css 是 option:checked。所以，我尝试了这个：

.body > select > option:checked { 
    background: black;
    color: red;
}

但是，这似乎没有任何作用，背景保持蓝色，而文本颜色保持白色。我怎样才能改变这些颜色？

此外，我想更改 background/color，因为当 selected 选项失焦时（现在，它默认为灰色背景，这在我看来非常难看）

Answer 1

由于似乎没有人有答案，所以我会说对我有用的，稍微hack一下。原来操作系统设置了select选项的背景颜色，所以背景颜色不能用css改变。然而，box-shadow 属性是这样工作的：

.body > select > option:checked { 
    box-shadow: 0 0 10px 100px #00B2F3 inset;
}

它允许您设置颜色和插入，意思是只有当前选项 selected。

现在，它的工作： https://jsfiddle.net/v7tqumpe/5/

虽然文字颜色无法更改，所以它仍然是白色。

完整代码如下：

.body > select > option { 
  padding-top: 1px;
  cursor: default;
 }
 .body > select > option:checked { 
  box-shadow: 0 0 10px 100px #00B2F3 inset;
 }
 .body > select { 
  height: 100%;
  width: calc(100% - 10px);
  color: #00B2F3;
  border: 1px solid #00B2F3;
  padding: 0px 0px;
 }

<div class="body">

  <select size="7" class="form-control" id="subjects">
    <option>one</option>
                <option>two</option>
                <option>three</option>
  </select>

</div>

Answer 2

Complete code: Change background of selected option

实际上，您无法为 :checked 选项元素的所有 CSS 属性设置样式。 color , background-color 不能直接工作所以你必须使用 background 代替。

HTML:

<div class="body">
    <select size="7" class="form-control" id="subjects">
        <option>one</option>
        <option>two</option>
        <option>three</option>
    </select>
</div>

CSS:

.body > select option:checked { 
    background: linear-gradient(0deg, black 0%, black 100%);
    background: -moz-linear-gradient(0deg, black 0%, black 100%);
    background: -webkit-gradient(0deg, black 0%, black 100%);
}

所选选项的样式背景

styling background of selected option

html

css

html-select

background