html - 选择前后选择字体颜色

Question

我有一个表单选择，其中第一个选项是禁用的默认标题，它就像一个占位符。

<select>
  <option disabled selected>Client</option>
  <option value="John">John</option>
  <option value="Pete">Pete</option>
</select>

我希望能够在用户点击选择之前设置字体 color:#999 的样式，然后在他们做出选择之后，字体应该更改为 color:# 333。这可能吗？

考虑以下 jsFiddle:http://jsfiddle.net/ayxeb759/

fiddle 表明这对于其他表单元素是可能的，但可能不是选择。文本输入使用 ::placeholder 样式然后为 block 设置样式，如下所示:

/* text input before */
*:-moz-placeholder { color: #AAA; }
*::-moz-placeholder { color: #AAA; }
*:-ms-input-placeholder { color: #AAA; }
*::-webkit-input-placeholder { color: #AAA; }

/* text input after */
input[type="text"] { color: #333; }

复选框使用 :checked 在用户做出选择后改变样式。

那么我怎样才能为 select 实现同样的效果呢？

Answer 1

这似乎仅靠 CSS 是不可能的。虽然 :checked 伪类适用于 option 元素(现代浏览器支持)，动态匹配所选选项，select< 的文本颜色 元素与选项的颜色不同。可以单独设置，但是目前在CSS中还没有办法根据选择的选项来设置。这意味着即使您将默认的虚拟选择颜色设置为灰色，该选项文本也会显示为黑色(或者在控件的初始状态下为 select= 设置的任何颜色。

只需一点 JavaScript，您就可以解决这个问题。您最初将仅使用 CSS 将 select 元素颜色设置为 #333，并将虚拟默认选项颜色设置为 #999。 JavaScript 代码只会根据所做的选择设置 select 元素的颜色。 (将其设置为 #333 就足够了，因为不可能将选择更改为初始虚拟选项。)

<style>
select { color: #999 }
option { color: #333 }
option[selected]  { color: #999; background: white }
</style>
<select onchange=
   "if(this.value==='') {this.style.color='#999'} else {this.style.color='#333'}">
  <option disabled selected value="">Client</option>
  <option value="John">John</option>
  <option value="Pete">Pete</option>
</select>