CSS 伪类 :invalid 表示一个元素（例如 <form>、<fieldset> 或 <input>），其内容或值根据 type 属性中指定的类型无效，或无法验证。
例如，电子邮件输入、 <input type="email"> 其值与有效电子邮件模式不匹配或数字输入 <input type="number"> 具有包含字母的值。这两种情况都是无效的。
伪类 :invalid 在向用户指示字段错误时很有用。
使用 :out-of-range 伪类应用的任何样式都会覆盖使用 :invalid 伪类应用的样式。适用于 <input type="number">。
:无效的伪类可以与其他选择器一起使用，例如 :hover、:focus 等。
对于单选按钮，如果需要其中一个按钮，则 :invalid 伪类将应用于所有单选按钮。
Gecko 不会将样式应用于:无效的伪类。但是，Gecko 确实将样式应用于 :user-invalid 伪类。
可访问性问题:对于无效输入，默认使用的颜色是红色，这对于有一定色盲状态的人来说可能会有些困难。相反，建议在无效输入中添加图标或描述性文本，以便更容易理解。
语法
:invalid {
/* ... */
} CSS :invalid 示例
以下示例演示了在输入字段上使用 :invalid 伪类的使用。这里我们看到当字段中的数据无效时，要么不在指定范围内，要么不正确，背景颜色会发生变化。
<html>
<head>
<style>
.container {
margin: 40px auto;
max-width: 700px;
}
p {
font-size: 1.5em;
}
input {
display: block;
width: 50%;
height: 2em;
background-color: lightgray;
}
input:invalid {
background-color: tomato;
}
input[type="number"]:invalid {
background-color: orange;
}
input:invalid:focus {
outline: 0;
border: none;
box-shadow: 0 0 5px 5px rgba(0, 136, 255, 0.3);
}
</style>
</head>
<body>
<div class="container">
<p>
输入类型为 1 到 10 之间的数字。
</p>
<input type="number" min="1" max="10" value="2">
<p>
输入类型为电子邮件，这是必需的。 如果为空则无效。
</p>
<input type="email" required>
</div>
</body>
</html> 在上面的例子中:
提供了两个输入字段，一个是数字类型，另一个是电子邮件类型。
带有数字的输入字段，提供 CSS 样式，这样如果该值不是数字且不在 1 到 10 范围内，则将其标记为无效。
电子邮件输入字段如果不遵循，则将其标记为无效电子邮件模式或空。
另一个伪类 :focus 与 :invalid 一起使用，这样当无效字段具有焦点时，就会应用 CSS 样式。
以下示例演示了在字段集上使用 :invalid 伪类的情况。输入字段和按钮的可见性保持隐藏，直到输入为空或不正确。
<html>
<head>
<style>
/* 将无效字段集的可见性设置为隐藏 */
fieldset:invalid ~ fieldset {
visibility: hidden;
}
/* 当字段集具有无效值时禁用按钮 */
form:invalid button {
background-color: darkgrey;
opacity: 0.2;
}
input,
textarea {
box-sizing: border-box;
width: 500px;
font-family: monospace;
padding: 0.25em 0.5em;
}
button {
width: 200px;
border: thin solid darkgrey;
font-size: 1.25em;
background-color: green;
color: white;
position:relative;
}
</style>
</head>
<body>
<form>
<fieldset>
<label for="userid">用户ID</label><br />
<input type="text" name="userid" id="userid" required />
</fieldset>
<fieldset>
<label for="email">Email</label><br />
<input type="email" name="email" id="email" required />
</fieldset>
<button type="submit" name="send">提交</button>
</form>
</body>
</html> 在上面的示例中:
有两个字段集，每个字段集都有一个标签和输入元素，一个用于用户 ID，另一个用于电子邮件。
第二个字段集保持隐藏状态，直到未传递有效值为止在第一个中。
直到两个字段集都具有有效值之前，按钮保持禁用状态。
输入元素是设置为必填，因此用户需要输入有效的内容，然后才能看到表单的其余部分并对其进行操作。