:invalid

:invalid 是一种伪类选择器，它允许对无效表单元素进行样式设置。:invalid 可以添加到任何表单元素，例如 form、fieldset 或 input，以根据元素的有效性或包含的子元素的有效性来增强样式。

form:invalid {
  outline: 3px dashed red;
}

语法

:invalid {
  /* ... */
}

虽然在所有表单元素的语法上都相似，但 form、fieldset 和 input 之间的验证略有不同。我们将在接下来的部分中花时间探讨这些差异。

表单

form 元素允许使用 :invalid 根据子表单元素（例如 fieldset 或 input）的有效性进行条件样式设置。如果任何子表单元素无效，则 form 也将被视为无效，并且将应用 :invalid 条件样式。

form:invalid {
  outline: 3px dashed red;
}

字段集

类似于 form，fieldset 也允许使用 :invalid 根据子 input 元素（如单选按钮或复选框输入）的有效性进行条件样式设置。

fiedset:invalid {
    outline: 3px dashed red;
}

输入

input 元素允许使用 :invalid 通过验证 input 的 value 进行条件样式设置。

验证检查输入值是否为使用 required 属性所需的，或者输入是否必须与 pattern 属性描述的模式匹配。

将 :invalid 添加到 input 将对所有无效输入类型应用相同的样式。将输入与 [type] 属性选择器配对可实现对特定输入类型的样式设置。

/* All input types */
input:invalid {
    outline: 3px dashed red;
}

/* Specific input types */
input[type="text"]:invalid {
    outline: 3px dashed red;
}

用法

可访问性注意事项

虽然 :invalid 允许对表单元素进行增强样式设置，但这可能不足以成功地将输入的有效性可访问地传达给辅助设备。

除了设置输入的样式之外，请考虑包含描述无效验证的文本，以便辅助设备可以读取。

验证测试

要对输入启用验证测试，必须通过将 required 属性应用于该字段来将输入设置为必填字段。

<input type="text" id="name" name="name" required />

具有 required 属性的输入，如果未赋予值，将与 :invalid 伪类选择器匹配。

浏览器将为某些输入类型提供额外的验证测试。例如，电子邮件类型输入通常要求在输入值中包含一个“@”符号才能被视为有效。

通过为输入提供一个模式，该模式应与输入值匹配才能被视为有效，可以增强有效性测试。这可以通过在输入上包含 pattern 属性来实现。

pattern 属性必须提供一个模式，通常以 正则表达式 格式，来测试提供的输入值。

<input type="text" id="zipcode" name="zipcode" pattern="[0-9]{5}" inputmode="numeric" required />

链式伪类

:invalid 伪类可以与其他伪类选择器（如 :focus 或 :hover）链接在一起，以进一步调整样式。

.input:focus:invalid {
    outline: 3px dashed red;
}

与 :has() 一起使用

由于功能性伪类选择器 :has() 在浏览器中广泛可用，因此可以将其与有效性伪类选择器结合使用，使其他元素能够从条件样式表单元素中受益。

要为包含无效输入的父元素设置样式

div:has(input:invalid) {
  outline: 3px solid red;
}

规范

:invalid 在 CSS 选择器级别 4 规范 中定义为“有效性伪类”，这意味着它用于根据对用户输入的评估来设置交互元素的样式。

浏览器支持

相关文章

其他资源

• Mozilla 开发者网络 – :invalid
• W3C – 选择器级别 4
• HTML 规范 – :invalid
• W3C 颜色使用，理解成功标准 1.4.1

相关