:invalid

:invalid CSS 伪类表示任何 <form>、<fieldset>、<input> 或其他 <form> 元素，其内容未能验证。

试一试

此伪类可用于突出显示用户的字段错误。

语法

css

:invalid {
  /* ... */
}

无障碍

红色通常用于表示无效输入。患有某些类型色盲的人将无法确定输入的状态，除非它伴随着一个不依赖于颜色来传达含义的其他指示器。通常，使用描述性文本和/或图标。

示例

为显示验证而对元素进行着色

HTML

html

<form>
  <div class="field">
    <label for="url_input">Enter a URL:</label>
    <input type="url" id="url_input" />
  </div>

  <div class="field">
    <label for="email_input">Enter an email address:</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">Name</label><br />
    <input type="text" name="name" id="form-name" required />
  </fieldset>

  <fieldset>
    <label for="form-email">Email Address</label><br />
    <input type="email" name="email" id="form-email" required />
  </fieldset>

  <fieldset>
    <label for="form-message">Message</label><br />
    <textarea name="message" id="form-message" required></textarea>
  </fieldset>

  <button type="submit" name="send">Submit</button>
</form>

CSS

css

/* Hide the fieldset after an invalid fieldset */
fieldset:invalid ~ fieldset {
  display: none;
}

/* Dim and disable the button while the form is invalid */
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;
}