Newly available 条件付きYES。Baseline Newly available。フォームバリデーション表示の改善に有効。フォールバックとして :valid/:invalid を用意。

:user-valid / :user-invalid

:user-invalid は CSS の擬似クラスで、ユーザーが操作した後、制約検証に基づき有効と判断されなかった検証済みのフォーム要素を表します。

:user-invalid 擬似クラスは、ユーザーがフォームの送信を試みた後、そのフォーム要素を再び操作するまで、 :invalid, :out-of-range, :required で空欄の要素に一致します。

フォームバリデーション

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:user-invalid
119
119
88
16.5
119
16.5
その他
css.selectors.user-valid

`:ユーザー有効`
119
119
88
16.5
119
16.5
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
対応条件
  • 以前は別名で対応していました: :-moz-ui-invalid (4)
注釈 1件
対応条件
  • 以前は別名で対応していました: :-moz-ui-valid (4)

基本構文

CSS 
input:user-valid {
  border-color: #16a34a;
  background-image: url('check.svg');
}

input:user-invalid {
  border-color: #dc2626;
  background-image: url('error.svg');
}

input:user-invalid + .error-message {
  display: block;
}

ライブデモ

Emailinput

:user-valid /:user-invalid Emailinput demo.

プレビュー全画面表示

requiredtext

:user-valid /:user-invalid requiredtext demo.

プレビュー全画面表示

Urlinput

:user-valid /:user-invalid URLinput demo.

プレビュー全画面表示

実務での使いどころ

  • 操作後バリデーション

    ユーザーが入力・変更した後にのみエラーや成功のスタイルを表示し、初期状態でのエラー表示を防ぐ。

  • 段階的フォームフィードバック

    各フィールドへの入力完了後に個別にフィードバックを表示。

注意点

  • Baseline Newly available のため、古いブラウザには :valid/:invalid でフォールバックを提供。
  • ブラウザごとに「操作済み」と判断するタイミングが異なる場合がある。

フォールバック戦略

CSS 
/* フォールバック: :valid/:invalid */
input:invalid {
  border-color: #dc2626;
}

/* モダンブラウザ: ユーザー操作後のみ */
input:user-invalid {
  border-color: #dc2626;
}

アクセシビリティ

  • バリデーションエラーはスタイル変更だけでなく、aria-describedby でエラーメッセージテキストも提供する。
  • 色だけでなくアイコンやテキストで状態を伝える。

参考リンク