选择选项后设置<select>标记样式[CSS3]

Question

我有一个select标签，如下所示： ＆LT;选择＆GT;   ＆LT;选项＆GT;布拉赫＆LT; /选项＆GT;   ＆LT;选项＆GT;布拉赫＆LT; /选项＆GT;   ＆LT;选项＆GT;布拉赫＆LT; /选项＆GT;   ＆LT;选项＆GT;布拉赫＆LT; /选项＆GT; ＆LT; /选择＆GT; 我使用MaterialiseCSS作为我的CSS框架，并已成功覆盖并将选择性样式应用于textareas等其他输入元素（http://materializecss.com/forms.html） 我只想调整边框底部，并选择一个选项后标签的颜色。 我尝试了以下伪类：[：active，：focus，：checked，：enabled，：valid，:: before和:: after]试图找到适合我的CSS规则。和往常一样，我已经通过实现源代码挖掘并搜索了MDN以获得正确的答案，但到目前为止还没有这样的运气。 我喜欢有人给我指出正确的文件，或者在这个问题上给我一个骨头。谢谢你的帮助。

Answer 1

不幸的是，这不可能使用CSS。一些可能的解决方法：

1. 使用javascript
2. 使用html5 required属性以及CSS的:required伪类。类似的东西：

<select required>
    <option value="">None</option>
    <option>Blah</option>
    <option>Blah</option>
    <option>Blah</option>
    <option>Blah</option>
</select>

select {
    border: 5px solid #ccc;
}

select:valid {
    border-color: green;
}

不是一个完美的解决方案，但它可能有助于你正在做的事情。

JSFiddle

Browser support