:invalid

:invalidCSS 伪类选择器,用来选择任何未通过验证<form><fieldset><input> 或其他表单元素。

尝试一下

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

语法

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 Standard
# selector-invalid
Selectors Level 4
# validity-pseudos

浏览器兼容性

BCD tables only load in the browser

参见