更改<选择>取决于它的值-仅CSS(?）

Changing the color of a <select> depending on its value - CSS only(?)

本文关键字：CSS 选择 lt gt 取决于 更改      更新时间：2023-09-26

我有一个HTML选择元素，里面有一些选项：

<select class = "myRed" id="mySelect" onchange="onSelectChange()">
    <option selected value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

当select对象的值为0时，我希望它的文本颜色为红色，否则为黑色。我可以通过JavaScript:做到这一点

function onSelectChange(){
    if (document.getElementById('mySelect').value == 0){
        document.getElementById('mySelect').className = 'myRed';
    } else {
        document.getElementById('mySelect').className = 'myBlack'
    }
}

其中

.myRed{color:red;}

和

.myBlack{color:black;}

然而，有人告诉我，这在某种程度上只能通过CSS实现，而不需要使用JavaScript。除了使用JS，我想不出其他方法了。谁能给我个建议吗？

您可以使用required并将空值分配给第一个选项：

<select class="mySelect" required>
    <option value="">0</option>
    <option value="1">1</option>
</select>

css：

.mySelect { font-size: 2em; }
.mySelect option { color: green; }
.mySelect option[value=""] { color: red; }
.mySelect:invalid { color: red; }

检查小提琴

如果你正在寻找简单的东西，你总是可以这样做：

.css

.myRed{color:red;}
.myBlack{color:black;}

.html

<select class = "myRed" id="mySelect">
    <option selected value="0" class="myRed">0</option>
    <option value="1" class="myBlack">1</option>
    <option value="2" class="myBlack">2</option>
</select>

http://codepen.io/anon/pen/yyPKoM

相关文章：