つい先日CSSのとあるイベントで取り上げられたらしく、Xを眺めていたら:user-invalidという文字が割と大量発生してたので気になり調べてみました。私個人としては、みたことある気がするけど、まともに使ったことはありませんでした。

そんな方は本記事の内容をぜひご活用ください

:user-invalidとは

:user-invalidは、HTMLフォームにおいて状態を示すCSS疑似クラスの1つです。この疑似クラスは、ユーザーが実際に入力や操作を行った後に、その入力が無効であると判断された場合にのみ適用されます。

主な特徴

フォーム要素（input, textarea, select等）に対して使用
ユーザーの操作後にのみ適用される
リアルタイムでのバリデーションフィードバックが可能

通常の:invalidと:user-invalidの比較

表で比較してみます。

擬似クラス名	説明
:invalid	・ページ読み込み直後から適用される・ required属性のある空フィールドにも適用・ユーザーの操作を待たない
:user-invalid	・ユーザーが実際に操作した後にのみ適用・より自然なユーザー体験を提供・初期表示時には適用されない

みなさんご存知の通り、通常の:invalidだとページ読み込み直後から適用されるといった適用タイミングの融通の効かなさが有名です。その為JSでタイミングを調整したり、:invalidを使わずにカスタムで:invalidにあたるクラスや状態を作成したりという手間が必要でした。

それに対して、:user-invalidだとページ読み込み直後は起動適用されず、ユーザーの操作に応じて適用されるようになります。これだけ聞いても自分的にはかなり嬉しい機能です。

具体的な実装例

基本的には以下のように、inputのスタイルとは別に:user-invalid状態のスタイルを作成する形で実装します。

style.css

/* 基本スタイル */
input {
    border: 2px solid #ccc;
    padding: 8px;
}

/* 無効な入力時のスタイル */
input:user-invalid {
    border-color: #ff0000;
    background-color: #ffebee;
}

上記の基本的な使い方をしつつ実際に作成してみると以下のようになります。
入力していただければわかると思いますが、初期状態・クリックするだけで何も入力してない状態だとエラー表示が出ないでいてくれます。

ブラウザ互換性
比較的新しい機能のため、ブラウザでサポート状況を見て使用しましょう。
必要に応じて:invalidとの併用やフォールバックを検討するのも1つの方法かと思います。
とはいえIE終了後、モダンなバージョンであれば、どの主要ブラウザでも問題なく使用できる状況だと思いますが詳しく知りたい方はこちらをどうぞ

まとめ

今回は:user-invalidについて取り上げました。
従来のCSSだけではできなかった絶妙な機能なので、今後も活用していきたいです！

本記事をご拝読いただきありがとうございました