:invalid 👉 エラーになった入力欄のスタイルを指定

CSSの疑似クラスセレクター:invalidを使うと、ブラウザによるバリデーションでエラーが検出された<input><form>のスタイルを変えることができます。

:invalidはすべての主要ブラウザで使用可能

IEを含むすべての主要ブラウザで使用できます。
ブラウザ対応状況へスキップ

:invalidの使用例

例1:メアド形式が間違っていると枠線を赤に

例えば、エラーになった<input>枠線を赤にしてみます。ここではメールアドレス用の入力欄(<input type="email">)を使うことにします。メールアドレスの形式でない文字列を入力すると、ブラウザがエラーを検出してくれます。

input:invalid {
  border: solid 1px red;
}

👆メールアドレスの形式ではない文字列を入れるとエラー(:invalid)になります。CSSでinput:invalid { ~ }とすれば、エラーが検出されたinputを装飾できるわけですね。

ユーザーの入力ミスがあったときに、リアルタイムで視覚的に間違っていることを伝えられるのは魅力的です。

例2:入力必須フィールドが空ならメッセージを表示

<input>タグにrequired属性を追加するとフィールドが入力必須になり、空だとブラウザがエラーを検出してくれます。

ここでは、CSSの隣接セレクター[1]を使って、空のとき(= :invalid)だけアラート・メッセージを表示してみます。

/* inputのすぐ隣に配置するメッセージ要素 */
.error-message {
  font-size: 12px;
  color: #ff7676;
  display: none; /* 非表示に */
}
/* :invalid時だけ隣の要素を表示 */
input:invalid + .error-message  {
  display: block;
}

入力するとメッセージが消えるはずです

👆input:invalidとなっている場合のみ、すぐとなり(すぐ下)のエラーメッセージ「※入力必須です」が表示されます。

:invalidを他の:◯◯と合わせて使う

:invalidは、:hover :required :focus :before :afterなどの擬似クラス・疑似要素と合わせて使うことができます。

/* invalid かつ focus時のスタイル */
input:invalid:focus {
  border: solid 3px red;
  outline: 0;
}

👆この例では、input:invalid:focusと繋げているため、エラーが検出(:invalid)かつフォーカスがあたったときのみスタイルが変わります。

否定セレクタを使ってinput:invalid:not(:focus)とすれば、逆にフォーカスが当たっていないときのスタイルを指定できます。

注意点

  • :invalidが使えるのは、ブラウザによるエラーチェックだけです。自作やライブラリのJavaScriptのバリデーションがエラーを検出しても:invalidは使えないので注意しましょう。
  • コロン:は1つです。:hover:activeと同じ擬似クラスです。

  1. 要素A + 要素B { ~ }とすれば、要素Aのとなりの要素Bに対してのみスタイルをあてることができます。 ↩︎

ブラウザ対応状況

主要ブラウザ全てで使用できます 🎉

🖥デスクトップ

  • Chromeのアイコン
    Chrome
    10〜
  • Safariのアイコン
    Safari
    10.1〜
  • Firefoxのアイコン
    Firefox
    4〜
  • Edgeのアイコン
    Edge
    12〜
  • IEのアイコン
    IE
    10〜

📱モバイル

  • Android Chromeのアイコン
    Android Chrome
    79〜
  • iOS Safariのアイコン
    iOS Safari
    10.3〜

caniuse.comで詳しく見る