我在文本输入中使用占位符,效果很好。但我也希望在选择框中使用占位符。当然,我可以使用以下代码:

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

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

这只会使下拉列表中的选项变灰(因此单击箭头后):

option:first {
    color: #999;
}

问题是:人们如何在选择框中创建占位符?但这已经得到了回应,欢呼。

使用此选项会导致所选值始终为灰色(即使在选择实际选项后):

select {
    color: #999;
}

当前回答

基于MattW的回答,您可以在做出有效选择后,通过仅在占位符保持选中时有条件地隐藏它,使选择占位符选项在下拉菜单中可见(因此选择无效)。

select:必需:无效{颜色:灰色;}select:无效>选项[value=“”][禁用]{显示:无;}期权{颜色:黑色;}<选择所需><option value=“”disabled selected>选择一些</选项><option value=“1”>一个</option><option value=“2”>两个</option></选择>

其他回答

我看到了正确答案的迹象,但要将所有答案结合起来,这将是我的解决方案:

选择{颜色:灰色;}期权{颜色:黑色;}选项[默认值]{显示:无;}<选择><option value=“”默认选择>选择您的选项</option><option value=“hurr”>Durr</option></选择>

以下解决方案也适用于Firefox,无需任何JavaScript:

选项[默认值]{显示:无;}<选择><option value=“”默认选择>选择您的年龄</option><option value=“1”>1</option><option value=“2”>2</option><option value=“3”>3</option><option value=“4”>4</option></选择>

选择:焦点选项。文件夹{显示:无;}<选择><option selected=“selected”class=“holder”>请选择</option><option value=“1”>选项#1</option><option value=“2”>选项#2</option></选择>

在这里,我修改了大卫的答案(接受的答案)。在他的回答中,他将禁用和选定属性放在选项标签上,但当我们也放置隐藏标签时,它看起来会更好。

通过在选项标签上添加额外的隐藏属性,它将防止在选择“Durr”选项后重新选择“Select your option”选项。

<选择><option value=“”disabled selected hidden>选择您的选项</option><option value=“hurr”>Durr</option></选择>

我刚刚偶然发现了这个问题,下面是Firefox和Chrome的工作原理(至少):

<style>选择:无效{颜色:灰色;}</style><表单><选择所需><option value=“”禁用所选隐藏>请选择</选项><option value=“0”>通电时打开(大多数阀门都这样做)</option><option value=“1”>通电时关闭,断电时自动打开</option></选择></form>

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

注意:在“占位符”选项上使用空值属性允许验证(必需属性)绕过“占位符”,因此如果选项未更改,但是必需的,则浏览器应提示用户从列表中选择一个选项。

更新(2015年7月):

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

谷歌Chrome-v.43.0.2357.132Mozilla Firefox-第39.0版Safari-v.8.0.7(占位符在下拉列表中可见,但不可选择)Microsoft Internet Explorer-v.11(占位符在下拉列表中可见,但不可选择)Project Spartan-v.15.10130(占位符在下拉列表中可见,但不可选择)

更新(2015年10月):

我删除了style=“display:none”,改为支持广泛的HTML5属性hidden。隐藏元素具有与显示类似的特性:在Safari、Internet Explorer和(Project Spartan需要检查)中都没有,在下拉列表中该选项可见,但不可选择。

更新(2016年1月):

当需要select元素时,它允许使用:invalid CSS伪类,该类允许您在select元素处于“占位符”状态时设置其样式。:由于占位符选项中的值为空,因此此处无效。

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

大多数浏览器都支持这个伪类。Internet Explorer 10及更高版本。这对于自定义样式的选择元素最有效;在某些情况下,例如(Mac在Chrome/Safari中),您需要更改选择框的默认外观,以便显示某些样式,例如背景色和颜色。您可以在developer.mozilla.org上找到一些关于兼容性的示例和更多信息。

Chrome中的原生元素外观Mac:

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