:user-valid
:user-valid CSS 伪类表示任何经过验证的表单元素，其值根据其验证约束正确验证。但是，与:valid不同，它仅在用户与之交互后才匹配。
如果表单控件有效且发生以下任何情况，则应用此伪类：
- 用户对表单控件进行了更改并提交了更改，例如通过将焦点移到其他位置。
- 用户已尝试提交表单，即使未对控件进行任何更改。
- 当控件获得焦点时，其值无效，并且用户进行了更改使其有效，即使焦点仍在控件中。
一旦应用此伪类，当控件获得焦点时，用户代理会在每次按键时重新验证控件是否有效。
- 如果控件具有焦点，并且当它获得焦点时其值无效，则在每次按键时重新验证。
结果是，如果用户开始与控件交互时控件是有效的，则只有当用户将焦点转移到另一个控件时，有效性样式才会改变。但是，如果用户试图纠正先前标记的值，则当值变为有效时，控件会立即显示。必填项仅在用户更改它们或尝试提交未更改的无效值时才被标记为无效。
语法
css
:user-valid {
/* ... */
}
示例
在 :user-valid 上设置颜色和符号
在以下示例中，绿色边框和 ✅ 仅在用户与该字段交互后才显示。尝试将电子邮件地址更改为另一个有效的电子邮件，以查看其效果。
html
<form>
<label for="email">Email *: </label>
<input
id="email"
name="email"
type="email"
value="test@example.com"
required />
<span></span>
</form>
css
input:user-valid {
border: 2px solid green;
}
input:user-valid + span::before {
content: "✓";
color: green;
}
规范
| 规范 |
|---|
| HTML # selector-user-valid |
| 选择器 Level 4 # user-valid-pseudo |
浏览器兼容性
加载中…