:user-invalid

Baseline 2023

新推出

自 ⁨2023 年 11 月⁩ 起，此功能可在最新的裝置和瀏覽器版本中執行。此功能可能不適用於較舊的裝置或瀏覽器。

:user-invalid CSS 偽類表示任何經過驗證的表單元素，其值在使用者與其互動後，根據其驗證約束無效。

:user-invalid 偽類必須匹配一個 :invalid、:out-of-range 或空白但 :required 元素，介於使用者嘗試提交表單後到使用者再次與表單元素互動之間。

語法

css

:user-invalid {
  /* ... */
}

在以下示例中，紅色邊框和 ❌ 僅在使用者與欄位互動後才會顯示。嘗試輸入非電子郵件地址的內容以檢視其效果。

html

<form>
  <label for="email">Email *: </label>
  <input id="email" name="email" type="email" required />
  <span></span>
</form>

css

input:user-invalid {
  border: 2px solid red;
}

input:user-invalid + span::before {
  content: "✖";
  color: red;
}

規範
HTML # selector-user-invalid
選擇器 Level 4 # user-invalid-pseudo

本頁面最後修改於 2025 年 10 月 1 日，由 MDN 貢獻者。