CSS 伪类选择器 :invalid 表示一个元素（如 <form>、<fieldset> 或 <input>），其内容或值根据 type 属性中指定的类型无效，或无法验证。
例如，电子邮件输入 <input type=“email”>其值与有效的电子邮件模式不匹配，或者数字输入 <input type=“number”>的值带有字母。这两种情况都是无效的。
伪类 :invalid 可用于向用户指示字段错误。
- 使用伪类 :out-of-range 应用的任何样式都会覆盖使用伪类 :invalid 应用的样式。适用于 <input type=“number”>。
- :invalid 伪类可以与其他选择器一起使用，例如 :hover、:focus 等。
- 对于单选按钮，如果需要其中一个单选按钮，则 :invalid 伪类将应用于所有单选按钮。
- Gecko 不会对 :invalid 伪类应用样式。但是，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>
Input type is number ranging between 1 and 10.
</p>
<input type="number" min="1" max="10" value="2">
<p>
Input type is email, which is required. If empty, its invalid.
</p>
<input type="email" required>
</div>
</body>
</html>
在上面的例子中：
- 提供了两个输入字段，一个是数字类型，另一个是电子邮件类型。
- 带有数字的输入字段，提供 CSS 样式，如果值不是数字且不在 1 到 10 的范围内，则将其标记为无效。
- 如果电子邮件输入字段不遵循电子邮件模式或为空，则该字段将被标记为无效。
- 另一个伪类 :focus 与 :invalid 一起使用，这样当无效字段具有焦点时，将应用 CSS 样式。
以下示例演示了在字段集上使用的 :invalid 伪类的使用。输入字段和按钮的可见性将保持隐藏状态，直到输入为空或不正确。
<html>
<head>
<style>
/* Set the visibility to hidden for an invalid fieldset */
fieldset:invalid ~ fieldset {
visibility: hidden;
}
/* Disable the button while the fieldsets have invalid value */
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">UserId</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">Submit</button>
</form>
</body>
</html>
在上面的例子中：
- 有两个字段集，每个字段集都有一个标签和输入元素，一个用于用户 ID，另一个用于电子邮件。
- 第二个字段集保持隐藏状态，直到第一个字段集未传递有效值。
- 在两个字段集都具有有效值之前，该按钮将保持禁用状态。
- 输入元素设置为必填元素，因此用户需要输入有效的输入，只有这样才能看到表单的其余部分并对其执行操作。
