使用 HTML5 为 <select> 框创建占位符
<select> 标记不存在占位符属性。
但是，有一些方法可以为选择框制作占位符。
为 <select> 元素创建占位符的最简单方法是使用 disabled 和 selected 属性以及 HTML5 hidden 全局属性。
使用 HTML5 为 <select> 框创建占位符的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
<h2>Select box with a placeholder</h2>
<select name="drinks" required>
<option value="" disabled selected hidden>Choose a drink</option>
<option value="coffee">Coffee</option>
<option value="tea">Tea</option>
<option value="milk">Milk</option>
</select>
</body>
</html>
结果
选择带有占位符的框 选择饮品 咖啡 茶 牛奶
这是为选择框添加占位符的第二种方法。
首先，我们需要在 <option> 标签的帮助下创建选择项。
然后，为空元素设置 disabled 和 selected 属性，这应该是占位符。
现在，我们可以看到第一行就像一个占位符字段。
它将无法检测但仍然可见。
为带有不可选择行的 <select> 框创建占位符的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
<h2>Select box with a placeholder</h2>
<select name="drinks" required>
<option value="" disabled selected>Choose a drink</option>
<option value="coffee">Coffee</option>
<option value="tea">Tea</option>
<option value="milk">Milk</option>
</select>
</body>
</html>
要在用户单击选择选项后使其不可见，我们必须将 display 属性设置为其“none”值。
并且还设置 :invalid 伪类无法验证 <select> 框占位符的内容。
此外，使用 CSS color 属性为占位符指定颜色。
当需要 <select> 元素时，它允许使用 CSS :invalid 伪类，它允许我们在 <select> 元素处于“占位符”状态时为其设置样式。
由于占位符选项中的空值， :invalid 在这里有效。
当一个值被设置时， :invalid 伪类被删除。
我们还可以选择使用 :valid 伪类。
使用 :required 和 :invalid 伪类为 <select> 框创建占位符的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
select:required:invalid {
color: #666;
}
option[value=""][disabled] {
display: none;
}
option {
color: #000;
}
</style>
</head>
<body>
<h2>Select box with a placeholder</h2>
<select name="drinks" required>
<option value="" disabled selected>Choose a drink</option>
<option value="coffee">Coffee</option>
<option value="tea">Tea</option>
<option value="milk">Milk</option>
</select>
</body>
</html>
样式化 HTML 表单字段，主要是 <select> 字段与 CSS 一直有点复杂。
以特定方式更改 <select> 表单字段通常是无法管理的。
为此，许多正在用由 HTML 和 CSS 提供支持的定制解决方案替换 <select> 元素。
日期：2020-06-02 22:15:02 来源：oir作者：oir