<select>
<option disabled selected>=select=</option>
<option>1</option>
</select>
当用户看到“=select=”时,我希望颜色是灰色的。
当选择“1”时,颜色为黑色,如下图所示:
select { color: black; }
select:empty { color: gray; }
//invalid
是否可以仅使用css来更改颜色?谢谢!
发布于 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
元素上使用了彩色class
es。但这不是强制性的。
希望能有所帮助。
https://stackoverflow.com/questions/51079480
复制相似问题