:valid

这篇翻译不完整。请帮忙从英语翻译这篇文章

摘要

:valid CSS 伪类 表示任意通过验证的 <input> 或 <form> 元素会被使用它. 它可以较容易让通过验证的字段采用合适的外观,用来帮助用户确认字段的数据是正确的.

语法

:valid { style properties }

例子

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

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

规范

Specification Status Comment
WHATWG HTML Living Standard
:valid
Living Standard No change.
HTML5
:valid
Recommendation Defines the semantic regarding HTML and constraint validation.
Selectors Level 4
:valid
Working Draft No change.
CSS Basic User Interface Module Level 3
:valid
Candidate Recommendation Defines the pseudo-class, but not the associated semantic.

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 10.0 4.0 (2) 10 (only input tags) 10.0 5.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? 4.0 (2) 未实现 10.0 5.0

参见

文档标签和贡献者

 此页面的贡献者: liyongleihf2006
 最后编辑者: liyongleihf2006,