协慌网

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

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

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

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

option:first {
    color: #999;
}

编辑：问题是：人们如何在选择框中创建占位符？但它已经得到了回答，欢呼。

使用此选项会导致所选值始终为灰色（即使选择了实际选项后）：

select {
    color:#999;
}

非 CSS 怎么样 - 没有 javascript / jQuery 的答案？

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

只是偶然发现了这个问题，这里有什么适用于 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" ，取而代之的是hidden的 HTML5 属性，它具有广泛的支持。 hidden元素具有与display: none IE，（，Project Spartan 需要检查）中的display: none类似的特性，其中该option在下拉列表中可见但不可选。

更新（2016 年 1 月）：

当required select元素required它允许使用:invalid CSS 伪类，它允许你在select元素处于 “占位符” 状态时设置样式。 :invalid由于占位符option中的空值，此处:invalid 。

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

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

Chrome 中的原生元素外观 Mac：

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

对于必填字段，现代浏览器中有一个纯 CSS 解决方案：

select:required:invalid {
  color: gray;
}
option[value=""][disabled] {
  display: none;
}
option {
  color: black;
}

<select required>
  <option value="" disabled selected>Select something...</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>