选择下拉菜单中的 CSS 样式第一个选项

Question

我已经查看了堆栈溢出问题的一些解决方案，但是所有的 jsfiddles 等似乎都没有解决问题(虽然我可能是错的)。

我正在尝试设计一个类似于(但可能更简单)的联系表单:http://tympanus.net/Tutorials/NaturalLanguageForm/

我的表格内容如下:

“你好，我想问你关于[选择下拉列表]的问题。”

然后用户通过输入和选择选项来完成表单。

但是我遇到的问题是如何为选择列表设置第一个选项或占位符的样式。我正在使用 Wordpress Contact Form 7，因此在 jQuery 方面没有太多灵 active 。我正在寻找一个简单的 CSS 解决方案来解决这个问题。使用 Contact Form 7 时，选择菜单没有占位符选项。

1. 有没有一种方法可以定位第一个选项并使其显示为灰色而不是黑色。这是在它被触发之前，然后在显示实际列表时不显示第一个选项？

2. 或者，有没有办法通过 CSS 在列表前添加占位符选项？然后改为设置样式？

列表显示如下:

<select name="subject" id="id_subject">
    <option value="How can I help?">How can I help?</option>
    <option value="Lets work together!">Lets work together!</option>
    <option value="I have a question!">I have a question!</option>
    <option value="I love your work!">I love your work!</option>
</select>

谢谢

Answer 1

1. 有一种方法，但您在不同的浏览器中会得到不同的结果。您可以使用 first-child 伪元素或将类添加到选项，如下所示。

option {
  color: #000;
}
option:first-child, option.first {
  color: #ccc;
}

<select>
  <option class="first">One</option>
  <option>Two</option>
  <option>Three</option>
</select>

1. 不仅仅是 CSS。我看到在不同浏览器中产生不同结果的一件事是在第一个元素上设置 display:none。在我们获得全面支持之前，我不是这种选择的忠实拥护者，也不是一般使用占位符来选择标签。另一件需要考虑的事情是在您的第一个选项标签上设置 disabled 属性。

tl;dr Styling select 标签现在有点臭，而且在未来一段时间内还会臭。一切都感觉像是黑客攻击。

如果您想使用 select 标签进行高级操作，我会选择 JavaScript 库。您可能想尝试 Select2 , Chosen或 Selectize.js