チェックボックス/ラジオボタンをCSSでデザインする方法

チェックボックスとラジオボタンをCSSでデザインする方法を解説します。

結論から書くと、色を変えたいだけなら accent-color を1行書くだけです。形まで作り込みたい場合に appearance: none から組み立てます。

▼どこまでやりたいかで選ぶ

この記事では、独自デザインのカスタム要素を作成する方法、FontAwesomeを活用したアイコン付き要素の実装方法、そしてスタイリッシュなオーバーレイ表示を利用する方法の3つを紹介します。

色だけ変えたいなら accent-color の1行

結論：accent-color を指定すると、ブラウザ標準のチェックボックスとラジオボタンの色だけを変えられます。appearance: none は不要です。

input[type="checkbox"],
input[type="radio"] {
  accent-color: #66bb6a;
}

これだけで、チェックの色と選択時の色が変わります。OS標準の見た目と操作感をそのまま保てるのが利点です。フォーカスリングやタップ領域といった、自作すると再現が面倒な部分を作り直さずに済みます。

accent-color はチェックボックスとラジオボタンのほか、progress と range にも効きます。対応は Chrome 93 / Safari 15.4 / Firefox 92 以降です。

ブランドカラーを反映したいだけなら、まずこれで足りないかを確認してください。次の appearance: none による作り込みは、形やサイズまで変えたい場合の方法です。

独自デザインのカスタムチェックボックスとラジオボタンの作成

CSSのみを使用して、独自のデザインを持つカスタムチェックボックスとラジオボタンを作成する方法を紹介します。

作成例

See the Pen
チェックボックス/ラジオボタン-独自デザイン by りん@エンジニア (@rinblog0408)
on CodePen.

HTML

<input type="checkbox" id="customCheckbox">
<label for="customCheckbox">カスタムチェックボックス</label>

<input type="radio" id="customRadio" name="radioGroup">
<label for="customRadio">カスタムラジオボタン</label>

CSS

/* カスタムチェックボックス */
input[type="checkbox"] {
  /* デフォルトのチェックボックスを非表示に */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* カスタムチェックボックスのサイズとスタイルを指定 */
  width: 20px;
  height: 20px;
  border: 2px solid #999;
  border-radius: 4px;
  /* 未チェックの時の背景色 */
  background-color: white;
  /* チェックマークの表示位置を中央に */
  display: inline-block;
  vertical-align: middle;
  /* チェックされた時のスタイル */
}
input[type="checkbox"]:checked {
  background-color: #66bb6a; /* チェックされた時の背景色 */
  border: 2px solid #66bb6a; /* チェックされた時の枠線の色 */
}

/* チェックマークを描く（appearance: none で消えるため自分で描く） */
input[type="checkbox"] {
  position: relative;
}
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 5px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ラジオボタンの中心の点を描く */
input[type="radio"] {
  position: relative;
}
input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #fff;
}

/* カスタムラジオボタン */
input[type="radio"] {
  /* デフォルトのラジオボタンを非表示に */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* カスタムラジオボタンのサイズとスタイルを指定 */
  width: 20px;
  height: 20px;
  border: 2px solid #999;
  border-radius: 50%;
  /* 未選択の時の背景色 */
  background-color: white;
  /* ラジオボタンの表示位置を中央に */
  display: inline-block;
  vertical-align: middle;
  /* チェックされた時のスタイル */
}
input[type="radio"]:checked {
  background-color: #42a5f5; /* チェックされた時の背景色 */
  border: 2px solid #42a5f5; /* チェックされた時の枠線の色 */
}

appearance: none を指定すると、チェックマークそのものも消えます。背景色を変えるだけだと「色は変わるがチェックが見えない」状態になるので、上のように ::after で印を描く必要があります。ここを忘れると、選択されているかどうかが色でしか判別できません。

フォーカスの見え方も自分で用意してください。標準のフォーカスリングも消えるため、キーボード操作している人が現在位置を見失います。

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid #1976d2;
  outline-offset: 2px;
}

:focus-visible を使うと、キーボード操作のときだけリングが出てマウスクリックでは出ません。

FontAwesomeを使用したアイコン付きチェックボックスとラジオボタン

FontAwesomeアイコンを活用して、チェックボックスとラジオボタンにアイコンを付ける方法を紹介します。

FontAwesomeのアイコンは多様で使い勝手がよく、視覚的にわかりやすいUIを作りたい場合に便利です。

作成例

See the Pen
チェックボックス/ラジオボタン-Fontawesome by りん@エンジニア (@rinblog0408)
on CodePen.

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css">

<input type="checkbox" id="iconCheckbox">
<label for="iconCheckbox"><i class="fa-solid fa-square-check"></i> アイコン付きチェックボックス</label>

<input type="radio" id="iconRadio" name="radioGroup">
<label for="iconRadio"><i class="fa-solid fa-circle-dot"></i> アイコン付きラジオボタン</label>

CSS

/* アイコン付きチェックボックス */
input[type="checkbox"] + label i {
  margin-right: 5px;
}

/* アイコン付きラジオボタン */
input[type="radio"] + label i {
  margin-right: 5px;
}

この記事の初出時はFont Awesome 4.7.0を使っていましたが、現在は7系が最新です。4系からはクラス名の付け方が変わっているので、古い記事のコードをそのまま貼ると表示されません。

▼バージョンによるクラス名の違い

アイコン名は5系で整理され、「名詞＋修飾」の順に統一されました。4系のクラス名は7系では使えません。

CSSライブラリを活用したスタイリッシュなオーバーレイ

CSSライブラリを使って、クリック時にオーバーレイ表示されるスタイリッシュなチェックボックスとラジオボタンを実装する方法を紹介します。

作成例

See the Pen
チェックボックス/ラジオボタン-オーバーレイ by りん@エンジニア (@rinblog0408)
on CodePen.

HTML

<div class="overlayCheckbox">
  <input type="checkbox" id="overlayCheckbox">
  <label for="overlayCheckbox">オーバーレイ表示されるチェックボックス</label>
</div>

<div class="overlayRadio">
  <input type="radio" id="overlayRadio" name="radioGroup">
  <label for="overlayRadio">オーバーレイ表示されるラジオボタン</label>
</div>

CSS

/* オーバーレイ表示されるチェックボックス */
.overlayCheckbox input[type="checkbox"] {
  /* デフォルトのチェックボックスを非表示に */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* カスタムチェックボックスのサイズとスタイルを指定 */
  width: 20px;
  height: 20px;
  /* 未チェックの時の背景色 */
  background-color: white;
  /* チェックマークの表示位置を中央に */
  display: inline-block;
  vertical-align: middle;
  /* チェックされた時のスタイル */
}
.overlayCheckbox input[type="checkbox"]:checked {
  position: absolute;
  z-index: -1;
}

/* オーバーレイ表示されるラジオボタン */
.overlayRadio input[type="radio"] {
  /* デフォルトのラジオボタンを非表示に */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* カスタムラジオボタンのサイズとスタイルを指定 */
  width: 20px;
  height: 20px;
  /* 未選択の時の背景色 */
  background-color: white;
  /* ラジオボタンの表示位置を中央に */
  display: inline-block;
  vertical-align: middle;
  /* チェックされた時のスタイル */
}
.overlayRadio input[type="radio"]:checked {
  position: absolute;
  z-index: -1;
}

まとめ

この記事では、独自デザインのカスタム要素を作成する方法、FontAwesomeを活用したアイコン付き要素の実装方法、そしてスタイリッシュなオーバーレイ表示を利用する方法の3つを紹介しました。

フォーム部品の見た目を揃える話としては、セレクトボックスのテキストを中央揃えにする方法も同じ appearance: none の考え方を使います。標準UIを無効にして自分で組み直す、という点は共通です。

要素の表示・非表示の切り替えは、CSSとjQueryでアコーディオンを実装するにまとめています。

▼HTML/CSS/JavaScriptの学習本を探してる方はこちらの記事をどうぞ