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

Question

我有一个选择标签，像这样：

<select>
  <option>Blah</option>
  <option>Blah</option>
  <option>Blah</option>
  <option>Blah</option>
</select>

我使用 MaterializeCSS 作为我的 CSS 框架，并且已经成功地覆盖并将选择性样式应用于其他输入元素，如 textareas 等 (http://materializecss.com/forms.html)

我只是想在选择一个选项后调整标签的border-bottom和color。

我尝试了以下伪类：[:active, :focus, :checked, :enabled, :valid, ::before, and ::after] 试图找到适合我应用 CSS 规则的状态。与往常一样，我已经挖掘了具体化源代码并在 MDN 上搜索了正确的答案，但到目前为止还没有这样的运气。

我希望有人能指点我正确的文档，或者在这个文档上给我一根骨头。感谢您的帮助。

Answer 1

很遗憾，这在使用 CSS 时是不可能的。一些可能的解决方法：

1. 使用javascript
2. 将 html5 必需属性与 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