选择标签的占位符
根据Mozilla Dev Network的说明,placeholder
不是输入元素的有效属性。
相反,您可以添加一个值为空且带有selected
属性的选项,如下所示。空的value
属性是必需的,以防止默认行为将中的内容用作该
的值。
在现代浏览器中,向元素添加
required
属性将不允许用户提交包含空值选择的表单。
如果您要样式化列表中的默认选项(在点击元素时显示的选项),则只有少量CSS属性得到良好支持,color
和background-color
是最安全的选择,其他CSS属性可能会被忽略。
在我的选项(在HTML5中),将默认选项标记为使用自定义data-*
属性是最佳方式。以下是将默认选项设置为灰色的方法:
select option[data-default] { color: #888; }
然而,这只会样式化下拉列表中的项目,而不是输入框中显示的值。如果想要使用CSS样式化它,就需要直接针对元素进行目标定位。在这种情况下,您只能在任何时候更改当前选中元素的样式。
如果您要让用户更难以选择默认项,可以在上设置
display: none;
CSS规则,但请记住,这不能防止用户选择它(例如,使用箭头键/输入),它只是让他们更难以这样做。
1 此回答以前建议使用不是标准的且本身没有意义的default
属性。
2 技术上可以使用JavaScript根据选定的值样式化本身,但这不在本问题的范围内、此回答则介绍了该方法。