根据其值改变<select>的颜色 - 仅使用CSS(?)

Question

我有一个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>

当选择对象的值为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，我无法想到其他的方法。请问是否有人能提供建议？

- Matteo NNZ

---

从浏览器到浏览器，选择样式非常不一致 - 我通常使用类似customselect（http://adam.co/lab/jquery/customselect/）的东西，但与您的问题所述不同，这确实使用javascript创建元素，然后使用CSS进行样式设置。 - Djave

@Oriol 感谢您的评论，我在没有测试的情况下编写了它，因为这次 JS 应该是“应避免”的解决方案。谢谢，我已经修复了它。 - Matteo NNZ

据我所知，你无法使用CSS获取当前选择的值。你可以使用[selected]来获取最初选中的option，但它不会是当前的选项。即使它是当前选项，你也需要一个父级选择器来为select添加样式。而且，即使浏览器支持父级选择器，样式化select也是非常不可靠的。 - Oriol

改变元素的样式需要使用JavaScript，CSS无法定位和改变样式。在您提供的代码中没有调用JavaScript函数onSelectChange()，您需要添加<select class="myRed" id="mySelect" onChange='onSelectChange();'>。 - user2417483

你应该使用一个JS库来将<select>标签替换成其他标签，并为这些其他标签提供样式，因为浏览器对<select>标签的样式支持有限。 - fcastillo

Answer 1

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

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

样式表：

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

请查看示例

- msfoster

---

非常感谢，这正是我在寻找的！ - Matteo NNZ

Answer 2

如果你想要简单的方法，你可以这样做：

.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

- user3781632

---

谢谢，这是我之前尝试过的，但并不符合我的目的。这是因为分配给选择器的类始终是“myRed”，因此在这种情况下将被样式化的元素是列表内部的元素，但选择的选择对象中的元素始终是红色的（至少没有js）:( - Matteo NNZ

是的，我发完那个帖子后就意识到你的意思了。抱歉！ - user3781632

这在 Chrome 98 中不起作用。 - feupeu