DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!
:user-invalid
是一个 CSS 伪类,它在 CSS 选择器级别 4 工作草案 中被提议,用于根据用户输入的值在最终用户与表单进行交互之后,是否与 HTML 标记中指定的接受值相符,来选择表单元素。 实际上,:user-invalid
被称为“用户交互伪类”,因为它在识别选择元素的用户操作方面是独一无二的。
以下 HTML 标记示例展示了一个带有数字字段的基本表单。
<form>
<label for="quantity"> Quantity:</label>
<input id="quantity" max="10" min="0" type="number" value="11" />
<!-- Rest of the form... -->
</form>
HTML 标记为输入设置的数字范围在 1
到 10
之间,但默认值被设置为 11
。 这意味着表单加载时该值立即无效。
但是,:user-invalid
伪类只有在用户实际与表单交互(超出在字段中输入内容)后才会生效。 该交互是 :user-invalid
和 :invalid
之间的区别。 同样的原理也适用于由 :in-range
、:out-of-range
和 :required
设置的已输入表单值。
input:user-invalid {
color: red;
}
以下图像展示了基于上述 HTML 示例的 :valid
和 :user-invalid
之间的不同状态。

这里令人困惑的是 :invalid
和 :user-invalid
之间的紧密关系。 如果将两者一起使用,可能难以区分它们。
input:invalid {
color: red;
}
input:user-invalid {
color: red;
}

:invalid
(中)和用户输入的无效值(右)之间的区别可能难以区分。在实际使用场景中,使用其中一个或为两者设置不同的样式可能能提供更好的用户体验。
浏览器可以决定如何以及何时匹配元素
值得注意的是,当 :user-invalid
匹配 :invalid
、:out-of-range
或为空但 :required
的表单字段时,它是在“用户尝试提交表单与用户再次与表单元素交互之间的时间段内”完成的。 但是,规范留下了空间供浏览器自行决定 元素何时匹配。
用户代理可以允许它们在其他时间匹配此类元素,这将适合向用户突出显示错误。 例如,UA 可以选择让
:user-invalid
在用户在其中键入一些文本并将焦点更改为另一个元素后匹配:invalid
元素,并在用户成功更正输入后停止匹配。
一旦确定用户输入的值为无效条目,我们就可以选择该元素。
浏览器支持
截至撰写本文时,只有 Firefox 支持,它在 Firefox 88 中实现了 :user-invalid
。 Chromium 项目有一个 开放的错误单(给它加星!),以便在基于 Blink 的浏览器(即 Chrome 和 Edge)中实现它。 还有一个 开放的 WebKit 单,以便在 Safari 中添加支持。
查看 caniuse 了解最新的浏览器支持情况。