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

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

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

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; /* チェックされた時の枠線の色 */
}

/* カスタムラジオボタン */
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; /* チェックされた時の枠線の色 */
}

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/4.7.0/css/font-awesome.min.css">

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

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

CSS

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

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

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;
}