チェックボックスとラジオボタンのタグ自体を装飾するCSS

こんにちは、ナカムラです。
先日、inputタグのチェックボックスとラジオボタン自体をCSSで装飾できないか？
という質問をいただいたのでこの記事で紹介したいと思います。

フォームでよく使われるチェックボックスやラジオボタンの装飾方法は、labelやspanなどで選択肢のテキストを囲み、チェックボックスやラジオボタンであるinputタグをdisplay:none;にします。
inputのcheckedの状態によって見た目を変える必要があるため、必ずinputタグの次にラベル要素を置く必要があります。
※:has()が使えるようになると不要になりますが、実務で使うのはもう少し先の話になりそうですので割愛します。

例1

<input id="item" type="checkbox"><label for="item">選択肢</label>

input[type="checkbox"]:checked + label::before {
　　/* ここにチェックされた時のスタイルを書く */
}

例2

<label><input type="checkbox"><span>選択肢</span></label>

input[type="checkbox"]:checked + span::before {
　　/* ここにチェックされた時のスタイルを書く */
}

※name属性やvalue属性は省略しています。

例1の場合、labelとリンクさせるためにfor属性やid属性をつけないと機能しません。
inputとlabel間に余白がある場合、クリックできるような配慮も必要になります。
そのため、例2の形で実装する方が簡単です。
そうした場合、spanは装飾のためだけのタグとなります。

また、実装するシステムやプラグインの都合でHTMLを編集できない場合にはどちらも使えないことがあります。
そこでinputタグ自体のスタイルを変更する方法が役に立ちます。

それではDEMOを見ていきましょう。

DEMO

See the Pen Untitled by Nakamura (@takayo-nakamura) on CodePen.

デフォルトのスタイルを削除する

そのままでは色や角丸などの装飾を追加しても反映されません。
そこでまず最初に、デフォルトのスタイルを削除します。

input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  
  &:hover {
    cursor: pointer;
  }
}

ポイントはこのプロパティになります。

appearance: none;

appearance - CSS: カスケーディングスタイルシート | MDN

これにより、ブラウザに元々指定されているスタイルを消すことができます。
DEMOの一つ目のスタイルはこの状態です。
スタイルが何もない状態になるので消えてしまいます。

ここから独自のスタイルを当てていけば装飾が可能になります。
before・after要素も使えるようですが、いつも大きさや色の変更程度なので、背景・線・角丸の指定くらいで済ませています。
（セレクタを増やしたくないので、できるだけ簡単に書きます）
※ラジオボタンはborder-radiusを50%にして丸い形にしています。今回はわかりやすいようにクラスごとに書いていますが、共通化できるものはまとめて書きます。

注意点

デフォルトの装飾を消したということは、チェックした時の装飾もなくなります。
ここも独自にスタイルを追加する必要があります。
チェックした時の装飾はSVGを背景画像として使用すると、色の変更などもしやすいです。
※inputタグを消す方法でも必要になるので手間は変わらないです。

まとめ

チェックボックスやラジオボタンの機能を使うのであればできるだけその機能を持ったタグそのものを使いたいです。
直接装飾ができるならその方が良いのではないかと思っています。