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

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

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

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

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

option:first {
    color: #999;
}

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

使用此方法会导致所选值始终为灰色（即使在选择真实选项后）：

select {
    color: #999;
}

分割线

网友回答：

我只是偶然发现了这个问题，以下是在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 年 <> 月）：

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

谷歌浏览器– v.43.0.2357.132
Mozilla Firefox – v.39.0
Safari – v.8.0.7（占位符在下拉列表中可见，但不可选择）
Microsoft Internet Explorer – v.11（占位符在下拉列表中可见，但不可选择）
斯巴达项目 – v.15.10130（占位符在下拉列表中可见，但不可选择）

更新（2015 年 <> 月）：

我删除了支持HTML5属性，该属性具有广泛的支持。该元素具有与Safari，Internet Explorer（Project Spartan需要检查）相似的特征，其中在下拉列表中可见，但不可选择。style="display: none"hiddenhiddendisplay: noneoption

更新（2016 年 <> 月）：

当元素是时，它允许使用 CSS 伪类，该伪类允许您在元素处于“占位符”状态时设置元素的样式。在这里工作，因为占位符中的空值。selectrequired:invalidselect:invalidoption

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

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

分割线

网友回答：

非 CSS – 没有 JavaScript/jQuery 答案：

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

更新（2021 年 <> 月）：

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

分割线

网友回答：

对于必填字段，现代浏览器中有一个纯 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>

模板简介：该模板名称为【如何为“选择”框制作占位符？】，大小是暂无信息，文档格式为.编程语言，推荐使用Sublime/Dreamweaver/HBuilder打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【HTML】栏目查找您需要的精美模板。