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

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

规范

浏览器兼容性

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.

参见

• Other validation-related pseudo-classes: :required, :optional, :valid
• Related Mozilla pseudo-classes: :-moz-ui-invalid, :-moz-submit-invalid
• Form data validation