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

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

有点哈克，但工程;也就是说，如果我正确地理解了这个问题。

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>

Answer 2

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 3

看这样子......

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 4

更改当前的CSS，你有这个：

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

}

这将使得具有相同的结果：

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

}

，而无需使用需要。