:valid

摘要

:valid CSS 伪类 表示任何其内容根据设置的输入类型正确地验证的<input> 或 <form> 元素。

这允许容易地使有效的字段采用有助于用户确认其数据格式正确的外观。

语法

:valid

例子

例子展示一个简单的表单，通过验证的元素表现为绿色，未通过验证的表现为红色.

HTML Content

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

CSS Content

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;
}

规范

浏览器兼容性

参见

• :invalid, :required, :optional