选择框的样式颜色（带有自定义包装器）带有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)

希望这会有所帮助！

Answer 2

你的意思是这样的吗？我认为，您还需要使用一些 jquery 或类似的东西：

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

jquery 使其可样式化和下拉：

    $(document).ready(function() {
   createDropDown();

   $(".dropdown dt a").click(function() {
     $(".dropdown dd ul").toggle();
   });

   $(document).bind('click', function(e) {
     var $clicked = $(e.target);
     if (!$clicked.parents().hasClass("dropdown"))
       $(".dropdown dd ul").hide();
   });

   $(".dropdown dd ul li a").click(function() {
     var text = $(this).html();
     $(".dropdown dt a").html(text);
     $(".dropdown dd ul").hide();

     var source = $("#source");
     source.val($(this).find("span.value").html())
   });
 });

 function createDropDown() {
   var source = $("#source");
   var selected = source.find("option[selected]");
   var options = $("option", source);

   $("body").append('<dl id="target" class="dropdown"></dl>')
   $("#target").append('<dt><a href="#">' + selected.text() +
     '<span class="value">' + selected.val() +
     '</span></a></dt>')
   $("#target").append('<dd><ul></ul></dd>')

   options.each(function() {
     $("#target dd ul").append('<li><a href="#">' +
       $(this).text() + '<span class="value">' +
       $(this).val() + '</span></a></li>');
   });
 }

在这里查看：http://jsfiddle.net/kybernaut/bbnso2og/4/

在这里你可以找到详细的解释和方法，我也从中得到启发：http://www.jankoatwarpspeed.com/reinventing-a-drop-down-with-css-and-jquery/