CSS - 伪类 :invalid

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，另一个用于电子邮件。
第二个字段集保持隐藏状态，直到第一个字段集未传递有效值。
在两个字段集都具有有效值之前，该按钮将保持禁用状态。
输入元素设置为必填元素，因此用户需要输入有效的输入，只有这样才能看到表单的其余部分并对其执行操作。

打印本页