:valid

:valid 是一个伪类选择器，用于在有效的表单元素上启用样式。:valid 可以添加到任何表单元素，例如 <form>、<fieldset> 或 <input>，以根据元素的有效性或包含的子元素的有效性增强样式。

form:valid {
  outline: 3px dashed green;
}

语法

:valid {
  /* ... */
}

尽管在所有表单元素中语法相似，但 <form>、<fieldset> 和 <input> 之间验证方式的不同会影响其工作方式。让我们分别介绍一下，看看它是如何工作的。

表单

:valid 伪类根据子表单元素（如 <fieldset> 或 <input>）的有效性，在 <form> 元素上启用条件样式。如果所有子表单元素均有效，则 <form> 也将被视为有效，并应用 :valid 条件样式。

form:valid {
  outline: 3px dashed green;
}

字段集

与 <form> 类似，:valid 根据子 <input> 元素的有效性有条件地将样式应用于 <fieldset> 元素，但仅限于直接子元素，如单选按钮或复选框。

fiedset:valid {
  outline: 3px dashed green;
}

输入

:valid 通过验证 <input> 的 value 值来将条件样式应用于 <input> 元素。

具体来说，验证检查输入值是否使用 required 属性作为必填项，或者输入是否必须与 pattern 属性描述的模式匹配。将 :valid 添加到 <input> 将对所有有效输入类型应用相同的样式。将输入与 [type] 属性选择器配对可以启用特定输入类型的样式。

/* All input types */
input:valid {
  outline: 3px dashed green;
}

/* Specfic input types */
input[type="text"]:valid {
  outline: 3px dashed green;
}

可访问性注意事项

如果您正在考虑使用 :valid 来增强表单元素的样式，这可能不足以成功地以可访问的方式传达输入的有效性。例如，请考虑包含描述成功验证的文本，以供辅助设备（如屏幕阅读器）使用。

有效性测试

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

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

如果已为输入提供值，则具有 required 属性的输入将与 :valid 伪类选择器匹配。浏览器将为某些输入类型提供额外的验证测试。例如，<input type="email"> 输入通常需要在输入值中包含 @ 才能被视为有效。

可以通过为输入提供一个输入值应该匹配才能被视为有效的模式来增强有效性测试。这可以通过在输入上包含 pattern 属性来实现。pattern 属性必须提供一个模式，通常采用 正则表达式 格式，以测试提供的值。

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

链接伪类

:valid 伪类可以链接到其他伪类选择器，例如 :focus 或 :hover，以进一步调整样式。

.input:focus:valid {
    outline: 3px dashed green;
}

与:has()一起使用

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

例如，我们可以为包含:valid输入的父元素设置样式

div:has(input:valid) {
  outline: 3px solid green;
}

我们甚至可以将其范围限定到<form>元素本身，以便在任何地方包含:valid元素时都对其应用样式

form:has(:valid) {
  /* If :valid is present anywhere in the form. */
}

规范

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

浏览器支持

相关文章

其他资源

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

相关