为选择选项占位符设置字体颜色答案

【问题标题】：Set font color for select option placeholder为选择选项占位符设置字体颜色
【发布时间】：2017-11-18 15:26:17
【问题描述】：

寻找一种方法来设置下拉列表占位符的字体颜色。当需要选择 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>

【问题讨论】：

你能在 sn-p 中展示你在做什么吗？

标签： html css

【解决方案1】：

将您拥有的当前 CSS 更改为：

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

这将产生相同的结果：

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

无需使用。

【讨论】：

【解决方案2】：

我一直在寻找这个很长时间，并且认为目前没有真正的正确方法可以仅使用 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;
}

【讨论】：

【解决方案3】：

可以用纯javascript实现（在第一次点击后处理options颜色属性）。
这是working example

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

【讨论】：

我建议将你的答案代码转换成一个功能性的 sn-p，让读者可以快速看到它的运行情况，同时为了清晰起见将语言分开。

【解决方案4】：

要直接处理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元素上设置实现的，然后:not在将option颜色设置为黑色时覆盖它，当进行选择时，文本也会显示为灰色.

如果不希望这样，我们可以根据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 打开时可以使用方法（包括以下方法）隐藏初始/默认非值（即“选择主要运动...”），这可能是不可取的。

注意：一旦选择了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>

【讨论】：

这实际上对我不起作用；选项总是继承选择的颜色，即使我在选项上放了一个 !important
@sammiepls - 在什么平台上使用什么版本的浏览器，您看到上述哪个 sn-ps 无法按描述运行？
我在 Mac 上，在 Chrome 78.0 上

【解决方案5】：

这样看……

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>

【讨论】：

嗨。您可能没有注意到问题指出“我不希望需要这些下拉列表”；您可能需要相应地编辑您的答案。

【解决方案6】：

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>

【讨论】：

不回答问题。