是否可以仅使用css更改选择空颜色
是否可以仅使用css更改选择空颜色
提问于 2018-06-28 17:36:22
<select>
<option disabled selected>＝select＝</option>
<option>1</option>
</select>当用户看到“=select=”时，我希望颜色是灰色的。
当选择“1”时，颜色为黑色，如下图所示：
select { color: black; }
select:empty { color: gray; }
//invalid是否可以仅使用css来更改颜色？谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-28 20:17:14
您可以使用函数来更改select元素onchange的class
var myselect = document.getElementById("select1");
function colourFunction() {
var colour = myselect.options[myselect.selectedIndex].className;
myselect.className = colour;
}
// Call function on load:
colourFunction();.color_gray {
color: gray;
}
.color_black {
color: black;
}<select id="select1" onchange="colourFunction()">
<option disabled selected class='color_gray'>＝select＝</option>
<option class='color_black'>1</option>
</select>
请注意，我还在option元素上使用了彩色classes。但这不是强制性的。
希望能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51079480
复制相关文章
相似问题