:user-invalid

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。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
Selectors Level 4 # user-invalid-pseudo

このページは MDN の貢献者によって 2026年3月15日に最終更新されました。