正在寻找一种设置下拉列表占位符字体颜色的方法。当需要选择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>
要直接处理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>以这种方式看...
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>将当前的CSS更改为此：
select, select[size="0"], select[size="1"] {
border-radius: 0px;
border-color: rgb(169, 169, 169);
}
这将产生与以下相同的结果：
select:required:invalid {
color: #9e9e9e;
}
无需使用。
可以通过纯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>
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>