Javascript 更改a的颜色<；选择>；取决于其值-仅CSS（？）

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

在哪里

及

---

然而，有人告诉我，这只能通过CSS实现，而不需要使用JavaScript。除了使用JS，我想不出任何其他方法。谁能给点建议吗

如果你想找一些简单的东西，你可以这样做：

.css

.html

0
1.
2.

---

您可以使用

required

并为第一个选项指定空值：

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

---

Check

不同浏览器之间的样式选择确实不一致–我通常使用类似customselect（）的东西，但与您的问题状态不同，这确实使用javascript创建元素，然后使用一层CSS来设置它们的样式。@Oriol感谢您的评论，我没有测试就写了它，因为JS应该是“避免的”这一次的解决方案。谢谢你，我修好了。@Djave，没错，我个人不知道没有javascript怎么做。但是告诉我这件事的人知道他的东西，所以值得一试，看看这里是否有人知道：）好吧，你不能用CSS获取select的当前值。您可以使用

[selected]

获取最初选择的

选项

，但它不是当前选项。即使它是当前的，您也需要一个父选择器来设置

选择的样式。即使浏览器支持父选择器，设置
select
的样式也是不可靠的。没有JavaScript，改变元素的样式是不可能的。CSS无法定位和更改样式。在您提供的代码中，没有调用需要添加的JavaScript函数onSelectChange（）。谢谢，这是我已经尝试过的，但没有达到我的目的。这是因为分配给select的类始终是“myRed”，所以在这种情况下，将设置列表中的元素的样式，但select对象中的选定元素将始终是红色的（至少，没有js）：（是的，我在发布之后马上意识到了你的意思。对不起！非常感谢，这正是我要找的！
.myRed{color:red;}

.myBlack{color:black;}

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

<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>

<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; }