CSS - 伪类 :valid

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>

请注意，如果将必需的文本输入留空，则认为输入无效，但当填充了正确的内容时，它们将生效。

绿色通常用于表示有效的输入，但具有特定类型色盲的个体可能难以感知它。为了解决这个问题，应使用额外的指示器，例如描述性文本或符号，来传达输入的状态，而不仅仅依赖于颜色。

打印本页