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等。

对于单选按钮，如果其中一个为required，则: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 样式。

以下示例演示了在 fieldset 上使用: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>

在上述示例中

有两个 fieldset，每个 fieldset 包含一个标签和一个输入元素，一个用于用户 ID，另一个用于电子邮件。
第二个 fieldset 保持隐藏，直到第一个 fieldset 中传递有效值。
在两个 fieldset 都具有有效值之前，按钮保持禁用状态。
输入元素设置为必填，因此用户需要输入有效输入，只有这样才能看到表单的其余部分并对其进行操作。

打印页面