【CSS】inputに値が入力されているか空文字かを判定する

やりたいこと

<input type="text">や<textarea>で文字が入力されているかどうかに応じてスタイルを変更したい場合があるが、それをjsを使わずにCSSのみで実現したい。

解決法

1. :placeholder-shownを使う

<input type="text" placeholder=" " />
<p>サンプルテキストです。</p>

input:placeholder-shown + p {
  color: red;
}

未入力の状態、すなわちプレースホルダーが表示されている状態なので擬似クラス:placeholder-shownで判定できる。

ちなみにinputタグのプレースホルダー値にはスペースを指定しておく必要がある。（空文字だとそもそも設定していないことになるため）

2. :invalidを使う

<input type="text" required />
<p>サンプルテキストです。</p>

input:invalid + p {
  color: red;
}

<input>にrequiredを指定しておくことで未入力の場合にバリデーションエラーになるため、擬似クラス:invalidで空文字判定できる。

3. valueの値を検証する

<input type="text" value="" />
<p>サンプルテキストです。</p>

input[value=""] + p {
  color: red;
}

Reactでvalueの値を制御している場合などは、input[value=""]で直接未入力かを判定できる。