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

Question

我已经看过一些关于堆栈溢出问题的解决方案，但是所有的 jsfiddles 等似乎都没有解决这个问题（不过我可能错了）。

我正在尝试设计一个与此类似（但可能更简单）的联系表单：http://tympanus.net/Tutorials/NaturalLanguageForm/

我的表单内容如下：

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

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

但是我遇到的问题是如何为选择列表设置第一个选项或占位符的样式。我使用的是 Wordpress Contact Form 7，所以 jQuery 的灵活性并不高。我正在寻找一个简单的 CSS 解决方案来解决这个问题。使用联系表 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 样式选择标签现在有点臭，而且会臭一段时间。一切都感觉像是黑客攻击。

如果你想用 select 标签做一些事情，我会选择一个 JavaScript 库。您可能想尝试Select2、Chosen 或Selectize.js

Answer 2

你可以试试

li:first-of-type{ // some style... }

定位第一个选项并为其设置样式