Question

我已经看过堆栈溢出这个问题的几个解决方案，但所有的jsfiddles等似乎都没有解决问题（虽然我可能错了）。

我正在尝试将类似（但可能更简单）的联系表单设置为：http://tympanus.net/Tutorials/NaturalLanguageForm/

我的表格如下：

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

然后用户输入并选择选项以完成表单。

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

有没有办法可以定位第一个选项并使其显示为灰色而不是黑色。这是在它被触发之前，然后在显示实际列表时不显示第一个选项？
或者，有没有办法通过CSS在列表前添加占位符选项？然后换一种风格呢？

列表显示如下：

>>> orig_list = [{'cpu': 4, 'drives': '4', 'mem': '4', 'name': 'server1', 'nics': '1'},
 {'cpu': 1, 'drives': '2', 'mem': '2', 'name': 'server2', 'nics': '2'},
 {'cpu': 2, 'drives': '1', 'mem': '8', 'name': 'server3', 'nics': '1'}]

>>> for item in orig_list:
        if item['cpu']<4:
            item['cpu']=4
            item['notes'] = 'updated cpu'

>>> orig_list
[{'cpu': 4, 'drives': '4', 'mem': '4', 'name': 'server1', 'nics': '1'},
 {'cpu': 4, 'drives': '2', 'mem': '2', 'name': 'server2', 'nics': '2', 'notes': 'updated cpu'},
 {'cpu': 4, 'drives': '1', 'mem': '8', 'name': 'server3', 'nics': '1', 'notes': 'updated cpu'}]

由于

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

不仅仅是CSS。我在不同的浏览器中使用不同结果的一件事是在第一个元素上设置display:none。在我们获得全面支持之前，我不是这个选择的忠实粉丝或者通常使用占位符来选择标签。另一件需要考虑的事情是在第一个选项标签上设置disabled属性。

tl; dr样式选择标签现在有点臭，并且会在一段时间内发臭。一切都像是黑客。

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

Answer 2

你可以尝试

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

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

“选择”下拉列表中的CSS样式优先选项

2 个答案: