html - 选择框的样式颜色(带有自定义包装器)下拉文本与 css

Question

我选择了带有一些自定义 css 样式的下拉框，可以使用 styled-select 包装器实现:

HTML:

<div class="styled-select">
<select name="example_length" aria-controls="example" class="">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>

CSS:

.styled-select {
      background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 84% 0;
      height: 29px;
      overflow: hidden;
      width: 70px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      background-color: #1abc9c;
      display: inline-block;
      vertical-align: middle;
    }

 .styled-select select {
       background: transparent;
       border: none;
       font-size: 14px;
       color: #000;
       height: 29px;
       padding: 5px; 
       width: 90px;
    }

Link to JsFiddle

我正在尝试将选择框中所选值的颜色(默认显示 10)更改为白色，同时使下拉列表中的其他元素保持黑色。

我通过在 select css 中将颜色更改为白色来获得所需的效果，但它也会使下拉列表中的其他元素变为白色，如果将选择框放在白色背景上，这会使它们不可见。如果我将下拉菜单的背景更改为深色，它会覆盖样式选择框的颜色。

请帮忙!

Answer 1

您可以通过将以下内容添加到您的 CSS 来实现此目的:

option:not(:checked) {
  color: #000;
}

并且将 .styled-select select 上的默认颜色更改为 color:#fff，这样未选择的选项将具有黑色文本颜色, 而选中的文本颜色为白色

有关 :not() 选择器的更多信息，请转到 here (w3schools)

有关 :checked 选择器的更多信息，请转到 here (w3schools)

希望这对您有所帮助!