:invalid

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.

:invalid 是 CSS 伪类选择器，用来选择任何未通过验证的 <form>、<fieldset>、<input> 或其他表单元素。

尝试一下

label { display: block; margin-top: 1em; } input:invalid { background-color: ivory; border: none; outline: 2px solid red; border-radius: 5px; } 
<form> <label for="email">Email Address:</label> <input id="email" name="email" type="email" value="na@me@example.com" /> <label for="secret">Secret Code: (lower case letters)</label> <input id="secret" name="secret" type="text" value="test" pattern="[a-z]+" /> <label for="age">Your age: (18+)</label> <input id="age" name="age" type="number" value="5" min="18" /> <label ><input name="tos" type="checkbox" required checked /> - Do you agree to ToS?</label > </form>

该伪类选择器可用于突出显示用户的字段错误。

语法

css
:invalid { /* ... */ }

示例

使用颜色标识元素以显示验证结果

HTML

html
<form> <div class="field"> <label for="url_input">输入一个 URL：</label> <input type="url" id="url_input" /> </div> <div class="field"> <label for="email_input">输入一个电子邮件地址：</label> <input type="email" id="email_input" required /> </div> </form>

CSS

css
label { display: block; margin: 1px; padding: 1px; } .field { margin: 1px; padding: 1px; } 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; }

结果

展示分阶段的表单部分

在这个例子中，我们使用 :invalid 以及后续兄弟选择器（~）来分阶段地展示一个表单，使得表单最初只显示第一个完成的项目，当用户完成每一个项目时，表单会显示下一个项目。当整个表单完成后，用户可以提交它。

HTML

html
<form> <fieldset> <label for="form-name">姓名</label><br /> <input type="text" name="name" id="form-name" required /> </fieldset> <fieldset> <label for="form-email">电子邮件</label><br /> <input type="email" name="email" id="form-email" required /> </fieldset> <fieldset> <label for="form-message">信息</label><br /> <textarea name="message" id="form-message" required></textarea> </fieldset> <button type="submit" name="send">提交</button> </form>

CSS

css
/* 在无效的字段集后隐藏该字段集： */ fieldset:invalid ~ fieldset { display: none; } /* 在表单无效时，将按钮变暗并禁用它： */ form:invalid button { opacity: 0.3; pointer-events: none; } input, textarea { box-sizing: border-box; width: 100%; font-family: monospace; padding: 0.25em 0.5em; } button { width: 100%; border: thin solid darkgrey; font-size: 1.25em; background-color: darkgrey; color: white; }

结果

无障碍考虑

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

注意

单选按钮

如果一组单选按钮中的任何一个是 reuqire，并且未选择该组中的任何按钮，则应用 :invalid 伪类到所有按钮上（分组的单选按钮共享 name 属性的相同值）。

Gecko 默认设置

默认情况下，Gecko 不对 :invalid 伪类应用样式。但是，对于 :invalid 的某些子集情况，它会应用样式（使用 box-shadow 属性显示红色“发光”）。此时，应用的是 :user-invalid 伪类。

规范

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

浏览器兼容性

参见