Question

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

感谢您的帮助

Answer 1

要直接处理option字体颜色，我们可以将select元素上的颜色设置为浅灰色，然后将除第一个以外的所有option字体颜色设置为黑色。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

继续这些可能性：

虽然可以使用方法（包括以下内容）隐藏初始/默认非值（即＆＃34;选择主要运动......＆＃34;） {{ 1}}是开放的，可能不合适。

注意：选择select后，如果改变主意，则无法返回默认的非值初始状态。

但是，如果这个可用性/可访问性问题不是问题，那么在select`打开时隐藏非值默认值的简单修改：

＆＃13;

option

＆＃13;

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

＆＃13;

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>

Answer 3

这可以通过纯JavaScript实现（在第一次单击后处理options color属性）。
这是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>

Answer 4

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>

Answer 5

将当前的CSS更改为：

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

}

这将产生相同的结果：

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

}

不使用必需的。

Answer 6

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

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

6 个答案: