如何为“选择”框制作占位符？

Question

我在文本输入中使用占位符，效果很好。但我也想为我的选择框使用占位符。当然我可以只使用这段代码：

 <select>
    <option value="">Select your option</option>
    <option value="hurr">Durr</option>
</select>

但是“选择您的选项”是黑色的，而不是浅灰色的。所以我的解决方案可能是基于 CSS 的。 jQuery 也很好。

这只会使下拉列表中的选项变灰（因此在单击箭头后）：

 option:first {
    color: #999;
}

问题是：人们如何在选择框中创建占位符？但已经有人回答了，干杯。

并使用此选项导致所选值始终为灰色（即使在选择了真实选项之后）：

 select {
    color: #999;
}

原文由 Thomas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

非 CSS - 无 JavaScript/jQuery 答案：

 <label>Option name
<select>
    <option value="" disabled selected>Select your option</option>
    <option value="hurr">Durr</option>
</select>
</label>

更新（2021 年 12 月）：

这适用于最新的 Firefox、Chrome 和 Safari。正如评论中指出的那样，过去它不适用于许多浏览器。

原文由 David 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我只是偶然发现了这个问题，以下是在 Firefox 和 Chrome 中有效的方法（至少）：

 <style>
select:invalid { color: gray; }
</style>
<form>
<select required>
    <option value="" disabled selected hidden>Please Choose...</option>
    <option value="0">Open when powered (most valves do this)</option>
    <option value="1">Closed when powered, auto-opens when power is cut</option>
</select>
</form>

禁用 选项停止使用鼠标和键盘选择 <option> ，而仅使用 'display:none' 允许用户仍然通过键盘箭头进行选择。 'display:none' 样式使列表框看起来“不错”。

注意：在“占位符”选项上使用空的 value 属性允许验证（必需属性）绕过“占位符”，因此如果该选项未更改但需要，则浏览器应该提示用户从列表中选择一个选项。

更新（2015 年 7 月）：

此方法已确认在以下浏览器中有效：

• 谷歌浏览器 - v.43.0.2357.132
• Mozilla Firefox - v.39.0
• Safari - v.8.0.7（占位符在下拉列表中可见，但不可选择）
• Microsoft Internet Explorer - v.11（占位符在下拉列表中可见但不可选择）
• Project Spartan - v.15.10130（占位符在下拉列表中可见，但不可选择）

更新（2015 年 10 月）：

我删除了 style="display: none" 以支持 HTML5 属性 hidden 得到广泛支持。 hidden 元素具有与 display: none 在 Safari、Internet Explorer 中（Project Spartan 需要检查）相似的特征，其中 option 不可见可选择的。

更新（2016 年 1 月）：

When the select element is required it allows use of the :invalid CSS pseudo-class which allows you to style the select element when in它的“占位符”状态。 :invalid 在这里工作是因为占位符中的空值 option 。

设置值后，将删除 :invalid 伪类。如果您愿意，也可以选择使用 :valid 。

大多数浏览器都支持这个伪类。 Internet Explorer 10 及更高版本。这最适合自定义样式 select 元素；在某些情况下，即（Chrome / Safari 中的 Mac）您需要更改 select 框的默认外观，以便显示某些样式，即 background-color 和 color 。您可以在 developer.mozilla.org 找到一些示例和更多关于兼容性的信息。

Chrome 中的原生元素外观 Mac：

在 Chrome 中使用修改过的边框元素 Mac：

原文由 William Isted 发布，翻译遵循 CC BY-SA 4.0 许可协议