CSS 伪类 :valid 用于<input>或其他 <form> 元素，这些元素根据指定规则具有有效的内容。 它有助于使有效字段看起来不同，以便向用户确认其数据的格式正确。
这对于突出显示表单中正确填写的字段非常有用。
语法
:valid {
/* css declarations */
}
CSS :valid 示例
以下示例演示如何使用伪类 :valid 。
<html>
<head>
<title>Indicating Valid and Invalid Form Fields</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>
请注意，如果将必需的文本输入留空，则认为输入无效，但当填充了正确的内容时，它们将生效。
绿色通常用于表示有效的输入，但具有特定类型色盲的个体可能难以感知它。 为了解决这个问题，应使用额外的指示器，例如描述性文本或符号，来传达输入的状态，而不仅仅依赖于颜色。
