:user-valid

:user-valid CSS 伪类 表示任何已验证的表单元素，其值根据其 验证约束 正确验证。但是，与 :valid 不同，它只在用户与之交互后才会匹配。

如果表单控件有效并且发生以下任何情况，则应用此伪类

• 用户对表单控件进行了更改并提交了更改，例如通过将焦点移至其他地方。
• 用户尝试提交表单，即使对控件没有进行任何更改。
• 该值在获得焦点时无效，用户进行了更改使其有效，即使焦点仍在该控件中。

一旦应用了此伪类，用户代理就会在控件获得焦点时，在每次按键时重新验证该控件是否有效。

• 如果控件获得焦点，并且值在获得焦点时无效，则在每次按键时重新验证。

结果是，如果控件在用户开始与之交互时有效，则只有在用户将焦点移至另一个控件时才会更改有效性样式。但是，如果用户尝试更正先前标记的值，则控件会在值变为有效时立即显示。只有在用户更改必需项或尝试提交未更改的无效值时，才会将其标记为无效。

:user-valid {
  /* ... */
}

<form>
  <label for="email">Email *: </label>
  <input
    id="email"
    name="email"
    type="email"
    value="[email protected]"
    required />
  <span></span>
</form>

input:user-valid {
  border: 2px solid green;
}

input:user-valid + span::before {
  content: "✓";
  color: green;
}