根据其值更改<select>的颜色 - 仅限CSS(？)

Question

我有一个HTML select元素,里面有一些选项:

<select class = "myRed" id="mySelect" onchange="onSelectChange()">
    <option selected value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
</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,我无法考虑任何其他方式.有人可以建议吗？

Answer 1

您可以使用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; }

检查小提琴