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

刚刚偶然发现了这个问题，以下是Firefox&Chrome的工作原理(至少)

select:invalid { color: gray; }

Please Choose...

Open when powered (most valves do this)

Closed when powered, auto-opens when power is cut

禁用选项将停止同时使用鼠标和键盘进行选择，而只需使用'display:none'允许用户仍然通过键盘箭头进行选择。这个'display:none'样式只会使列表框看起来“很好”。

注意：使用空value属性上的“占位符”选项允许验证(必需的属性)具有“占位符”，因此如果选项没有更改但是必需的；浏览器应该提示用户从列表中选择一个选项。

确认此方法在下列浏览器中工作：谷歌Chrome-v.43.0.2357.132

Mozilla Firefox-v.39.0

Safari-v.8.0.7(占位符在下拉列表中可见，但不可选择)

MicrosoftInternetExplorer-v.11(占位符在下拉列表中可见，但不可选择)

项目Spartan-v.15.10130(占位符在下拉列表中可见，但不可选择)

移除style="display: none"支持HTML 5属性hidden得到了广泛的支持。这个hidden元素具有与display: none在Safari、IE(Spartan项目需要检查)中，option在下拉列表中可见，但不能选择。

当select元素是required它允许使用:invalidcss伪类，它允许您在select元素时，它处于“占位符”状态。:invalid在这里工作，因为占位符中的空值。option.

一旦设置了一个值，:invalid伪类将被删除。您也可以选择使用:valid如果你愿意的话。

大多数浏览器都支持这个伪类。IE10+这在定制样式中效果最好。select要素；在某些情况下，即(Chrome/Safari中的Mac)您将需要更改select框，以便显示特定的样式。background-color, color..您可以在developer.mozilla.org.