:user-invalid

基线 2023

新功能

自 2023 年 11 月起，此功能可在最新的设备和浏览器版本上运行。此功能可能无法在旧版设备或浏览器上运行。

:user-invalid CSS 伪类 表示任何已验证的表单元素，其值基于其 验证约束 无效，且用户已与其交互。

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

语法

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

示例

在 :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;
}

规范

规范
选择器级别 4
# user-invalid-pseudo

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅