:valid

:valid CSS 伪类 代表任何 <input> 或其他 <form> 元素，其内容 验证 成功。这使得有效字段可以轻松地采用一种外观，帮助用户确认其数据已正确格式化。

试一试

此伪类对于突出显示用户正确的字段很有用。

语法

css
:valid {
  /* ... */
}

无障碍

绿色通常用于表示有效输入。患有某些类型色盲的人将无法确定输入的状态，除非它伴随有一个不依赖颜色来传达意义的其他指示器。通常使用描述性文本和/或图标。

示例

指示有效和无效表单字段

在此示例中，我们使用如下结构，其中包括额外的 <span> 以便在其上生成内容；我们将使用它们来提供有效/无效数据的指示器

html
<div>
  <label for="fname">First name *: </label>
  <input id="fname" name="fname" type="text" required />
  <span></span>
</div>

为了提供这些指示器，我们使用以下 CSS

css
input + span {
  position: relative;
}

input + span::before {
  position: absolute;
  right: -20px;
  top: 5px;
}

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

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

input:valid + span::before {
  content: "✓";
  color: green;
}

我们将 <span> 设置为 position: relative，以便我们可以将生成的 内容相对于它们进行定位。然后，我们根据表单数据是否有效或无效，绝对定位不同的生成内容——分别为绿色勾号或红色叉号。为了给无效数据增加一些紧迫感，我们还在无效时为输入提供了粗红色的边框。

注意：我们使用 ::before 添加了这些标签，因为我们已经在使用 ::after 用于“必需”标签。

您可以在下面尝试它

请注意，当为空时，必需的文本输入是无效的，但在填写了一些内容后变为有效。另一方面，电子邮件输入在为空时是有效的，因为它不是必需的，但在包含非电子邮件地址的有效内容时变为无效。

规范

规范
HTML 标准
# selector-valid
选择器级别 4
# validity-pseudos

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅