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>

请注意，当必填文本输入为空时，则被认为无效，但当填写正确的内容时，它们会变为有效。

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

打印页面