:valid

该:validCSS伪类用于匹配<input>或<form>元素且要求其输入内容正确地满足输入类型的设定。这样使我们可以很容易地对效字段采用不同的外观，以帮助用户确认其数据格式正确。

input:valid {
  background-color: #ddffdd;
}

语法

:valid

实例

这个例子提供了一个简单的表单，它在验证正确时将元素设为绿色，而当元素不满足时则为红色。

HTML

<form>
  <label>Enter a URL:</label>
  <input type="url" />
  <br />
  <br />
  <label>Enter an email address:</label>
  <input type="email" required/>
</form>

CSS

input:invalid {
  background-color: #ffdddd;
}

form:invalid {
  border: 5px solid #ffdddd;
}

input:valid {
  background-color: #ddffdd;
}

form:valid {
  border: 5px solid #ddffdd;
}
  
input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:valid {
  border-color: #008000;
}

规范

浏览器兼容性