CSS 伪类 :valid 用于 <input> 或其他根据指定规则具有有效内容的 <form> 元素。它有助于使有效字段看起来不同，以向用户确认其数据格式正确。
这对于突出显示表单中正确填写的字段非常有用。
语法
:valid {
/* css 声明*/
} CSS :valid 示例
以下示例演示如何使用 :valid 伪类。
<html>
<head>
<title>指示有效和无效的表单字段</title>
<style>
input:valid {
border: 2px solid green;
}
input:invalid {
border: 2px solid red;
}
input:invalid + span::before {
content: "Invalid ✖";
color: red;
}
input:valid + span::before {
content: "Valid ✓";
color: green;
}
</style>
</head>
<body>
<form>
<div>
<label for="name">Name:</label>
<input type="text" id="name" required>
<span></span>
</div>
<br>
<div>
<label for="email">Email:</label>
<input type="email" id="email" required>
<span></span>
</div>
<br>
<div>
<label for="password">Password:</label>
<input type="password" id="password" required>
<span></span>
</div>
<br>
<div>
<input type="submit" value="Submit">
</div>
</form>
</body>
</html> 观察不可空文本输入在留空时被视为无效，但当填充正确的内容时，它们就会变得有效。
绿色通常用于显示有效的输入，但具有特定类型色盲的个人可能难以感知它。为了解决这个问题，应使用附加指示符（例如描述性文本或符号）来传达输入的状态，而不仅仅是依赖颜色。