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

:user-valid / :user-invalid

:user-valid と :user-invalid は、ユーザーが実際にフォーム要素を操作した後にのみマッチする。:valid/:invalid はページ読み込み直後からマッチしてしまう問題があったが、:user-* 擬似クラスはユーザーの操作後にのみ表示されるため、UXが大幅に改善される。

フォームバリデーション

概要

:user-valid と :user-invalid は、ユーザーが実際にフォーム要素を操作した後にのみマッチする。:valid/:invalid はページ読み込み直後からマッチしてしまう問題があったが、:user-* 擬似クラスはユーザーの操作後にのみ表示されるため、UXが大幅に改善される。

対応ブラウザ

デスクトップ

Chrome 119+
Edge 119+
Safari 16.5+
Firefox 88+

モバイル

Chrome Android 119+
Safari iOS 16.5+
Firefox Android 88+

基本構文

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;
}

実務での使いどころ

  • 操作後バリデーション

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

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

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

注意点

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

フォールバック戦略

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

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

アクセシビリティ

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

参考リンク