设置选择框选项占位符的字体颜色。

Question

寻找一种方法来设置下拉列表占位符的字体颜色。当select id是必需的时，以下内容有效：

select:required:invalid {
    color: #9e9e9e;
}

然而，我不希望这些下拉列表是必填项。一旦我删除了必填标签，占位符字体就会变回黑色。

以下是我的下拉列表：

<select id="searchresults4" name="primarysport">
    <option value="">Choose Primary Sport...</option>
    <option>Football</option>
    <option>Basketball</option>
    <option>Baseball</option>
    <option>Softball</option>
    <option>Soccer</option>
    <option>Golf</option>
</select>

- Michael Philibin

---

你能展示一下你正在做的代码片段吗？ - DCR

Answer 1

为了直接解决option字体颜色的问题，我们可以将颜色设置在select元素上为浅灰色，然后将除第一个外的所有option字体颜色设置为黑色。

这样，第一个option就会继承浅灰色，并在select打开和关闭时都显示为此颜色。

select {
  color: #9e9e9e;
}
option:not(:first-of-type) {
  color: black;
}

<select id="searchresults4" name="primarysport">
  <option value="">Choose Primary Sport...</option>
  <option>Football</option>
  <option>Basketball</option>
  <option>Baseball</option>
  <option>Softball</option>
  <option>Soccer</option>
  <option>Golf</option>
</select>

由于浅灰色字体颜色是通过在select元素上设置它来实现的，因此当将option颜色设置为黑色时，:not覆盖了它，选择时，文本也会显示为灰色。

如果这不是我们想要的，我们可以根据select是否具有:focus来更改颜色，在元素正在使用或未使用时显示灰色或黑色（取决于口味）：

/* with the :focus here, we would show grey when not using the element */
select {
  color: black;
}
/* with the :focus here, we show grey when using the element */
select:focus {
  color: #9e9e9e;
}
option {
  color: black;
}
option:first-of-type {
  color: #9e9e9e;
}

<select id="searchresults4" name="primarysport">
  <option value="">Choose Primary Sport...</option>
  <option>Football</option>
  <option>Basketball</option>
  <option>Baseball</option>
  <option>Softball</option>
  <option>Soccer</option>
  <option>Golf</option>
</select>

除了这些可能性以外：

虽然可以使用以下方法来隐藏初始/默认的非值（即“选择主要运动...”），当打开时，但这可能不是理想的选择。 注意：一旦选定一个，在改变主意的情况下，不可能返回到默认的非值初始状态。 然而，如果这个可用性/可访问性问题不成问题，这里有一个简单的修改，在打开时隐藏非值的默认值：

select {
  color: #9e9e9e;
}
option:not(:first-of-type) {
  color: black;
}
/* the modification */
option:first-of-type {
  display: none;
}

<select id="searchresults4" name="primarysport">
  <option value="">Choose Primary Sport...</option>
  <option>Football</option>
  <option>Basketball</option>
  <option>Baseball</option>
  <option>Softball</option>
  <option>Soccer</option>
  <option>Golf</option>
</select>

- Fred Gandt

---

对我来说这并不起作用；即使我在选项上加上 !important，选项仍然会继承选择框的颜色。 - sammiepls

@sammiepls - 你使用的是哪个版本的浏览器，以及在哪个平台上？你看到上述哪些代码片段无法按照描述正常运行？ - Fred Gandt

我正在使用Mac，Chrome 78.0版本。 - sammiepls

Answer 2

看看这个方式...

select:required:invalid {
  color: gray;
}
option[value=""][disabled] {
  display: none;
}
option {
  color: black;
}

<select id="searchresults4" name="primarysport" required>
    <option value="" disabled selected>Choose Primary Sport...</option>
    <option>Football</option>
    <option>Basketball</option>
    <option>Baseball</option>
    <option>Softball</option>
    <option>Soccer</option>
    <option>Golf</option>
</select>

- Ramon Marques

---

您好。您可能没有注意到问题陈述中提到“我不想让这些下拉列表是必填的”，因此您可能需要相应地编辑您的答案。 - Fred Gandt

Answer 3

我已经寻找这个方法很长时间了，发现目前没有只用CSS（且不需要字段）的正确方法来实现。因此，我使用了一些jQuery来完成它：

if (jQuery('select').length) {
    jQuery('select').each(function () {
        if ($(this).val() === "" || $(this).val() === null) {
            $(this).addClass('placeholder');
        } else {
            $(this).removeClass('placeholder');
        }
    });

    jQuery('select').on('change', function (e) {
        if ($(this).val() === "" || $(this).val() === null) {
            $(this).addClass('placeholder');
        } else {
            $(this).removeClass('placeholder');
        }
    });
}

然后在我的（S）CSS中，我这样做：

select {
    color: #000;
}

select.placeholder {
    color: #999;
}

- Loosie94

Answer 4

将您当前的CSS更改为以下代码：

select, select[size="0"], select[size="1"] {
  border-radius: 0px;
  border-color: rgb(169, 169, 169);
}

这将产生相同的结果：

select:required:invalid {
  color: #9e9e9e;
}

不使用 required。

- Reynante Daitol

Answer 5

select {
  color: #9e9e9e;
}
option:not(:first-of-type) {
  color: black;
}

<select id="searchresults4" name="primarysport">
  <option value="">Choose Primary Sport...</option>
  <option>Football</option>
  <option>Basketball</option>
  <option>Baseball</option>
  <option>Softball</option>
  <option>Soccer</option>
  <option>Golf</option>
</select>

- Mian Muhammad Ehtesham

---

你的回答可以通过添加更多支持性信息来改进。请编辑以添加进一步的细节，如引用或文档，以便他人能够确认你的答案是否正确。你可以在帮助中心找到关于如何撰写好答案的更多信息。 - Community

Answer 6

可以通过纯JavaScript实现（在第一次单击后处理options颜色属性）。
这里有一个工作示例

<!DOCTYPE html>
<html>
  <head>
    <style>
    #myselect{
    color:gray;
    }
    </style>
  </head>
  <body>
    <select id="myselect">
      <option disabled selected>Choose Item
      </option>
      <option>Item 1
      </option>
      <option>Item 2
      </option>
      <option>Item 3
      </option>
    </select>
    <script>
      // add event listener to change color in the first click  
      document.getElementById("myselect").addEventListener("click",setColor)
      function setColor()
      {
        var combo = document.getElementById("myselect");
        combo.style.color = 'red';
        // remove Event Listener after the color is changed at the first click
        combo.removeEventListener("click", setColor);
      }
    </script>
  </body>
</html>

- Jonathan Applebaum

---

我建议将你的答案代码转换为一个功能性片段，以便读者可以快速看到它的运行情况，并且分离语言以增加清晰度。 - Fred Gandt

Answer 7

我正在使用React，并且我通过条件语句解决了这个问题。

<select 
     style={{ color: data.state.length > 0 ? '#482668' : '#dad3e0' }}
>
    <option></option>
</select>

CSS
option {
   color: #482668
}

- Kunal Tyagi

Answer 8

select {
    color: #9e9e9e;
}

<select id="searchresults4" name="primarysport">
    <option value="">Choose Primary Sport...</option>
    <option>Football</option>
    <option>Basketball</option>
    <option>Baseball</option>
    <option>Softball</option>
    <option>Soccer</option>
    <option>Golf</option>
</select>

- DCR

---

没有回答问题。 - Fred Gandt