CSS样式在下拉选择框中的第一个选项

Question

CSS样式在下拉选择框中的第一个选项

cssforms

3

我查看了Stack Overflow上关于此问题的几个解决方案，但所有的jsfiddles等似乎都没有解决这个问题（也许我错了）。

我正在尝试为联系表单设置类似于这个（但可能更简单的）样式：http://tympanus.net/Tutorials/NaturalLanguageForm/ 我的表单大致如下：

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

然后用户根据需要输入或选择选项以完成该表单。

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

以下是我的两个问题：

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>

谢谢

- rxssmcdxwell

欢迎来到 Stack Overflow！寻求调试帮助的问题（“为什么这段代码不起作用？”）必须在问题本身中包含所需的行为、具体问题或错误以及重现它所需的最短代码。请参阅如何创建一个最小、完整和可验证的示例。 - Paulie_D

3个回答

0

如果有人正在寻找相同的效果（一种样式中的第一个选项，其余在另一种样式中），我解决了这个问题，通过使用与之完全相同的元素（匹配css尺寸）来覆盖选择。

position: absolute
pointer-events: none

点击选择项，穿过覆盖层。

这也意味着第一个选项不是必需的。而且这适用于任何浏览器。

- jazzouche

0

你可以尝试使用以下代码来选中第一个选项并进行样式设置：

li:first-of-type{ // 一些样式... }

- Hux

啊，抱歉我应该说它是一个<option>列表而不是<li>列表。 - rxssmcdxwell

好的...你无法控制<option>的样式，它总是由本地渲染，我认为你可以使用JavaScript小部件来实现，如果你想要更多的控制。 - Hux

我已经为您调整了平衡。无论如何，感谢您的建议。 - rxssmcdxwell

那真是你的好意了。 - Hux

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- scottheckel · Accepted Answer

有一种方法，但是在不同的浏览器中结果不同。您可以使用 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 目前选择标签的样式设置有点麻烦，并且在今后的一段时间内会继续困扰着人们。感觉一切都像是一种hack。

如果您想要对选择标签进行高级操作，我建议选择一个JavaScript库。您可以尝试Select2，Chosen 或 Selectize.js