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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

回答：

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

以上是 如何更改选择框的选项文本的颜色？ 的全部内容， 来源链接： utcz.com/qa/400271.html

回到顶部