:valid

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

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

语法

Error: could not find syntax for this item

例子

参见 :invalid

Accessibility concerns

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

规范

Specification
HTML
# selector-valid
Selectors Level 4
# valid-pseudo

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:valid
Applies to <form> elements

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见