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/

这个小提琴表明这可能是其他表单元素，但可能不是选择。文本输入使用::placeholder样式，然后为块设置样式，如下所示：

/* 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就足够了，因为不应该将选择更改为初始虚拟选项。）

＆＃13;

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

＆＃13;

Answer 2

据我所知，只有CSS选项是不可能的。

这就是我所做的（或者那种）：

在选择框中添加一个额外的类，选择一个选项时将删除该类。

<强> CSS

select, select:focus {
    color:#333;
}

select.placeholder {
    color:#999;
}

<强> JS

[].forEach.call(document.querySelectorAll("select"), function(el) {
    el.addEventListener("change", function(e) {
        this.className = "";
    });
});

JSFiddle

选择前后选择字体颜色

2 个答案: