【CSS】 input や textarea タグを :focus-within 擬似クラスでカスタマイズする

input や textarea ってカスタマイズしにくいですよね

フォームに使われる要素は他の要素に比べてデフォルトのスタイルがたくさん当たっていたり、選択状態や無効状態など複数の状態があるのでカスタマイズしにくいですよね。

そこで :focus-within という擬似クラスを紹介したいと思います。

かゆいところに手が届く :focus-within 擬似クラス

僕はこの擬似クラスを長らくCSSを使っていて初めて知りました。どんな擬似クラスかというと下記のようなものになっています。

:focus-within は CSS の擬似クラスで、その要素または子孫要素にフォーカスがある場合に一致します。言い換えれば、それ自身が :focus 擬似クラスに該当するか、子孫に :focus に該当する要素がある要素を表します。

つまり input を div で囲ったときに div:focus-within とすれば input の状態に応じて div のスタイルを変えることができます。便利ですね。

下記の例は先頭に https:// を強制させる URL 入力フォームの例です。

<!-- URLの入力フォームの例 -->
<div>
  <span>https://<span>
  <input type="text">
<dvi>

<style>
  /* 子要素である input がフォーカスされたときのスタイル */
  div:focus-within {
    border: 1px solid gray;
  }
  /* input のデフォルトのスタイルを削除（例） */
  input {
    border: none;
    outline: none;
  }
</style>

React とかだと onFocus や onBlur 、 useState を使って簡単に実装できてしまうので見落としがちですが、 JavaScript を使わなくても CSS だけで実現できるので、使ってみると良いと思います。

まとめ

CSS は深い