简介
:required
选择器用于匹配表单中具有 required
属性的元素。当表单元素为必填项时,可以使用此选择器来应用特定样式,例如:
- 突出显示空字段
- 提供错误消息
- 禁用提交按钮,直到所有必需字段都已填写
语法
:required { /* 样式规则 */ }
用法
要使用 :required
选择器,只需将其应用于要样式化的表单元素即可。例如:
-- -------------------- ---- ------- ------ ------ ---------------------- ------ ----------- ----------- --------- ------ ------------------------- ------ ------------ ------------ --------- ------ ------------- ----------- -------
:required { border: 1px solid red; }
这将使所有必需的表单字段都带有红色边框。
浏览器支持
:required
选择器得到所有现代浏览器的广泛支持,包括:
- Chrome
- Firefox
- Safari
- Edge
- Opera
示例
以下是使用 :required
选择器的一些示例:
突出显示空字段
:required:invalid { background-color: #ffcccc; }
这将使所有必需的空字段都带有浅红色背景。
提供错误消息
:required:invalid ~ .error { display: block; }
这将显示具有 error
类的错误消息,当必需的字段为空时。
禁用提交按钮
:required:invalid ~ input[type="submit"] { disabled: true; }
这将禁用提交按钮,直到所有必需字段都已填写。
注意
:required
选择器仅适用于具有 required
属性的表单元素。对于其他类型的元素,它不会有任何效果。
此外,:required
选择器不会影响表单元素的验证。它仅用于应用样式。有关表单验证的更多信息,请参阅 HTML required
属性或 JavaScript validity
属性。