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 都具有有效值之前，按鈕保持停用狀態。
輸入元素設定為必填，因此使用者需要輸入有效輸入，只有這樣才能看到表單的其餘部分並對其進行操作。

列印頁面