:valid - CSS（层叠样式表） 编辑

:valid CSS 伪类表示内容验证正确的<input> 或其他 <form> 元素。这能简单地将校验字段展示为一种能让用户辨别出其输入数据的正确性的样式。

/* Selects any valid <input> */
input:valid {
  background-color: powderblue;
}

该伪类对于高亮正确字段是很有用的。

语法

:valid

例子

参见 :invalid。

 

Accessibility concerns

绿色常用于表示有效输入。但某些色盲的人将无法确定输入的状态（颜色），除非使用不依赖于颜色来传达意义的附加指示器。 通常，指示器使用描述性文本和（或）图标。

• MDN Understanding WCAG, Guideline 1.4 explanations
• Understanding Success Criterion 1.4.1  | W3C Understanding WCAG 2.0

规范

Specification	Status	Comment
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	Initial definition.

Browser compatibility

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

参见

• :invalid, :required, :optional
• Form data validation