:user-invalid

Baseline 2023

新推出

自 ⁨2023 年 11 月⁩ 起，此功能可在最新的设备和浏览器版本中运行。此功能可能不适用于较旧的设备或浏览器。

:user-invalid CSS 伪类表示任何经过验证的表单元素，其值在用户与其交互后，根据其验证约束无效。

:user-invalid 伪类必须匹配一个 :invalid、:out-of-range 或空白但 :required 元素，介于用户尝试提交表单后到用户再次与表单元素交互之间。

语法

css

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

在以下示例中，红色边框和 ❌ 仅在用户与字段交互后才会显示。尝试输入非电子邮件地址的内容以查看其效果。

html

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

css

input:user-invalid {
  border: 2px solid red;
}

input:user-invalid + span::before {
  content: "✖";
  color: red;
}

规范
HTML # selector-user-invalid
选择器 Level 4 # user-invalid-pseudo

本页面最后修改于 2025 年 10 月 1 日，由 MDN 贡献者。