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

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

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

语法

:valid

例子

参见 :invalid

 

Accessibility concerns

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

规范

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 10Edge Full support 12Firefox Full support 4IE Full support 10Opera Full support 10Safari Full support 5WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 4Opera Android Full support 10Safari iOS Full support 5Samsung Internet Android ?
Applies to <form> elementsChrome Full support YesEdge No support NoFirefox Full support 13IE No support NoOpera Full support YesSafari ? WebView Android ? Chrome Android ? Edge Mobile No support NoFirefox Android Full support 14Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown

参见

文档标签和贡献者

此页面的贡献者: Ende93, xgqfrms-GitHub, liyongleihf2006
最后编辑者: Ende93,