概述

:valid 选择器用于选择通过输入验证的表单元素。它只适用于 <input>、<select> 和 <textarea> 元素。

语法

:valid {
  /* 样式规则 */
}

用法

:valid 选择器在以下情况下选择表单元素：

• 元素具有 required 属性，并且其值不为空。
• 元素具有 pattern 属性，并且其值与正则表达式模式匹配。
• 元素具有 min 或 max 属性，并且其值在指定范围内。
• 元素具有 step 属性，并且其值是允许的步长。

示例

使用 :valid 样式化通过验证的输入字段

<input type="text" id="username" required>

#username:valid {
  border-color: green;
}

当用户输入有效用户名时，输入字段的边框将变为绿色。

使用 :valid 隐藏未通过验证的错误提示

<input type="email" id="email">
<span id="email-error" hidden>请输入有效的电子邮件地址</span>

#email:invalid + #email-error {
  display: block;
}

当用户输入无效的电子邮件地址时，错误提示将显示。

浏览器支持

:valid 选择器在所有现代浏览器中都得到支持，包括：

• Chrome
• Firefox
• Safari
• Edge
• Opera

与 :invalid 选择器的比较

:valid 选择器与 :invalid 选择器相反。:invalid 选择器选择未通过输入验证的表单元素。

注意事项

• :valid 选择器仅适用于表单元素。
• :valid 选择器不会影响表单元素的提交行为。
• 如果表单元素的值发生更改，则 :valid 选择器将重新评估该元素。

结论

:valid 选择器是一种强大的工具，可用于样式化通过输入验证的表单元素。它有助于创建用户友好的表单，并改善整体用户体验。