如何更改选择框的选项文本的颜色？

小编典典

如何更改选择框的选项文本的颜色？

css

我正在尝试将第一个选项的颜色更改为灰色，即只有文本（选择一个选项），但是在这里无法正常工作：

.grey_color {

  color: #ccc;

  font-size: 14px;

}


<select id="select">

   <option selected="selected"><span class="grey_color">select one option</span></option>

   <option>one</option>

   <option>two</option>

   <option>three</option>

   <option>four</option>

   <option >five</option>

</select>

阅读 427

2020-05-16

共1个答案

小编典典

Suresh，您不需要在代码中使用任何内容。您需要的是这样的东西：

.others {

    color:black

}


<select id="select">

    <option style="color:gray" value="null">select one option</option>

    <option value="1" class="others">one</option>

    <option value="2" class="others">two</option>

</select>

但是正如您所看到的，因为选项中的第一项是选择控件显示的第一件事，所以您看不到其分配的颜色。如果您打开选择列表并看到已打开的项目，则会看到可以为第一个选项分配灰色。因此，您需要jQuery中的其他功能。

$(document).ready(function() {
   $('#select').css('color','gray');
   $('#select').change(function() {
      var current = $('#select').val();
      if (current != 'null') {
          $('#select').css('color','black');
      } else {
          $('#select').css('color','gray');
      }
   }); 
});

2020-05-16