# :user-valid / :user-invalid

> ユーザーが実際に操作した後にのみ、フォーム入力の検証結果に応じてスタイルを適用する擬似クラスです。:invalidと違いページ表示直後の未入力フォームが赤くならないため、実用的なバリデーション表示がCSSだけで実現できます。

- カテゴリ: 擬似クラス
- URL: https://www.css-dictionary.com/property/pseudo-user-valid/
- MDN: https://developer.mozilla.org/ja/docs/Web/CSS/:user-valid

## 構文

```css
:user-valid / :user-invalid
```

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 119+ / Firefox 88+ / Safari 16.5+ / Edge 119+

## コード例

### 例1: 操作後にのみエラー/成功の見た目を適用

```css
input:user-invalid {
  border-color: #dc2626;
  background: #fef2f2;
}

input:user-valid {
  border-color: #16a34a;
}
```

### 例2: :has()と組み合わせてエラーメッセージの表示を制御

```css
.field:has(input:user-invalid) .error-message {
  display: block;
}
```

## TIPS

「操作した後」の判定（フォーカスを外した時など）はブラウザが適切に行ってくれるため、JSでtouched状態を管理する必要がありません。:has()との組み合わせでエラー文言の出し分けまでCSSで完結します。

## よくある間違い

:invalidをそのまま使うと、ページを開いた瞬間から必須項目が全部エラー表示になります。ユーザー向けのスタイルには:user-invalidを使い、:invalidはJSからの状態参照など内部用途に留めるのが現代的な使い分けです。

## AIがよく間違えるポイント

AIはフォームバリデーションの見た目に:invalid直付け（初期表示から赤くなる欠陥UI）か、JSでtouched/dirtyフラグを管理する重い実装を提案しがちです。:user-invalidを知らないAIも多いので、「:user-valid/:user-invalidを使って」と明示すると質の高いコードが出ます。

## AIへの依頼文例

- このフォームのバリデーション表示を、初期表示では赤くならないように:user-invalidベースで実装して
- Reactのtouchedフラグでやっているエラー表示切替を、:user-invalidと:has()のCSSに寄せられるか検討して

## 関連プロパティ

- [pseudo-focus-visible](https://www.css-dictionary.com/property/pseudo-focus-visible.md)
- [pseudo-has](https://www.css-dictionary.com/property/pseudo-has.md)
- [accent-color](https://www.css-dictionary.com/property/accent-color.md)