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

Question

我有一个 select 标签，像这样：

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

我正在使用 MaterializeCSS 作为我的 CSS 框架，并且已成功覆盖 selective 样式并将其应用到文本区域等其他输入元素（http://materializecss.com/forms.html)

我只想在 select 编辑选项后调整标签的 border-bottom 和 color。

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

我希望有人能为我指出正确的文档，或者向我介绍一下这个文档。感谢您的帮助。

Answer 1

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

使用javascript
使用 html5 必需属性以及 CSS 的 :required 伪 class。类似于：

<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

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

Styling <select> tag when option has been selected [CSS3]

html

css

select

styling

materialize