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

 

:invalid CSS 伪类 表示任意内容未通过验证的 <input> 或其他 <form> 元素 .

/* 可选定任意无效的<input> */
input:invalid {
  background-color: pink;
}

这个伪类对于突出显示用户的字段错误非常有用。

Syntax

:invalid

Example

以下示例是一个简单的表单,当值有效时,元素颜色为绿色,无效时为红色。

HTML

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

CSS

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:invalid {
  border-color: #C00000;
}

Result

注意

单选钮(Radio buttons)

若一组单选钮被设定为必须选定一个,在该组中没有按钮被选中的情况,:invalid伪类被应用到该组中的所有按钮。(单选钮组按照name属性共享相同值。)

Gecko 默认

默认情况下,Gecko不应用:invalid伪类设置的样式。但是,Gecko可以使用:-moz-ui-invalid伪类的样式(使用box-shadow 属性设置红色发光边框)来达到类似的效果,它可以被应用在:invalid伪类的子集中。

你可以使用以下CSS禁用红色发光边框,或完全重写它以改变无效输入域的外观:

:invalid {
  box-shadow: none;
}

:-moz-submit-invalid {
  box-shadow: none;
}

:-moz-ui-invalid {
  box-shadow: none;
}

规范

规范 状态 备注
HTML Living Standard
:invalid
Living Standard No change.
HTML5
:invalid
Recommendation Defines the semantics of HTML and constraint validation.
Selectors Level 4
:invalid
Working Draft Initial definition.

浏览器兼容性

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.

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:invalidChrome Full support 10Edge Full support 12Firefox Full support 4IE Full support 10Opera Full support 10Safari Full support 5WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 5Samsung Internet Android Full support 1.0
Applies to <form> elementsChrome Full support 40Edge No support NoFirefox Full support 13IE No support NoOpera Full support 27Safari Full support 9WebView Android Full support 40Chrome Android Full support 40Firefox Android Full support 14Opera Android Full support 27Safari iOS Full support 9Samsung Internet Android Full support 4.0

Legend

Full support  
Full support
No support  
No support

参见

文档标签和贡献者

此页面的贡献者: mdnwebdocs-bot, Ritr, ShirelyGong, liyongleihf2006, King.
最后编辑者: mdnwebdocs-bot,