Html 在选择之前和之后选择字体颜色

我有一个表单选择，其中第一个选项是禁用的默认标题，其作用类似于占位符

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

复选框使用：选中此复选框可在用户做出选择后更改样式

---

那么，我如何才能在select中实现同样的效果呢？

据我所知，仅CSS选项是不可能的

这就是我要做的，或者说：

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

CSS

JS

---

单凭CSS似乎不可能做到这一点。尽管：checked伪类应用于选项元素，并且受到现代浏览器的支持，动态匹配所选选项，但select元素的文本颜色与选项的颜色不同。它可以单独设置，但目前CSS中没有办法根据选择的选项设置它。这意味着，即使将默认虚拟选择颜色设置为灰色，该选项文本也将以黑色或控件初始状态下为select=设置的任何颜色显示

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

选择{color:999} 选项{color:333} 选项[选定]{颜色：999；背景：白色} 客户 约翰 皮特

---

在支持浏览器上，您的代码将第一个选项的颜色永久设置为333，因为无论是否选中该选项，该选项都具有selected属性。但你写的是“直到做出真正的选择”。那会怎么样？@JukkaK.Korpela我知道，这就是我的困境。如何实现正确的样式，但在选择框中仍有初始占位符/标题。请定义“正确的样式”。@JukkaK.Korpela在用户交互之前，选择框应为999。进行选择后，选择框应更改为333。类似于输入占位符，它可以单独设置为用户输入的文本样式。@JukkaK.Korpela我编辑了我的问题，并添加了示例和JSFIDLE来更好地说明问题。谢谢，尽管这是我正在寻找的CSS解决方案。如果您可以在所有其他表单元素上执行相同的操作，那么这将是一个遗憾。似乎愚蠢的是，选择框必须突出，并且看起来与页面上的其他任何东西都不一样。确实如此。选择框缺少占位符在规范甚至HTML5中都是一个空白，而且短期内不会有任何仅CSS的解决方案。谢谢，虽然我不想使用JS，但您的解决方案是非常非侵入性的-因此，如果确实无法在CSS中完成，这可能是最好的解决方案。

/* 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; }

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

select.placeholder {
    color:#999;
}

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