选择下拉颜色更改

Question

我创建了一个示例下拉列表（下面的代码）。我想更改选择选项中显示的“选择国家”的字体颜色：默认文本颜色为黑色，我想将其更改为红色。

<select id="select-id">
<option value="" selected="">Pick a Country</option>
<option value="">India</option>
<option value="">Sri Lanka</option>
<option value="">Sweden</option>

Answer 1

我相信以下解决方案能够满足您的需求。仅有几行CSS（代码段下方的说明）

警告

在所有浏览器中均不支持设置<select>和<option>元素的样式，因为它们是由操作系统而不是浏览器呈现的。有一些外部库可创建类似样式的元素，这些元素由可以样式化的HTML元素组成。以下解决方案并非100％安全。

摘要

#select-id {
  color: red;
}

#select-id option:not(:checked) {
  color: initial;
}

<select id="select-id">
  <option value="" selected="">Pick a Country</option>
  <option value="">India</option>
  <option value="">Sri Lanka</option>
  <option value="">Sweden</option>
</select>

说明

#select-id {
  color: red;
}

进行选择，所有选项都有color: red。

#select-id option:not(:checked) {
  color: initial;
}

使未选中的选项具有初始颜色，即黑色。

Answer 2

您可以设置第一个选项的样式，也可以对其应用类。

使用第一个选择器：

#select-id option:first-child {
  color: red;
}

使用类选择器：

 #select-id .placeholder {
   color: red;
 }

Answer 3

您可以尝试以下方法：

select option:first-child{
    color: red;
}