チェックボックスはウェブサイトのフォームの入力項目のひとつであるがこのチェックボックスの形はブラウザなどによって変わることがなく、HTMLの指定で変えることもできない。そこで、ラベルとCSSの定義で任意の形に変える方法を探してみた。

事前にやること

チェックボックスにラベルを付ける

通常のチェックボックスは□をクリックしないと切り替わらない。チェックボックスに続く文字列をクリックしてもチェックが切り替わるようにするためにはlabelタグを使う。labelタグはinputのidとlabelタグのforで指定する名称を一致させる。

labelがないとき

labelがないと、チェックボックスの□をクリックしないと反応しない。

<input type="checkbox">labelタグがないとき

↓「labelタグがないとき」をクリックしてもチェックボックスは反応しない。

labelがあるとき

labelタグを連携させておくと、labelタグで囲まれた文字列をクリックしたときもチェックボックスが反応する。

<input type="checkbox" id="exist-label">
<label for="exist-label">labelタグがあるとき</label>

↓では、「タグがあるとき」をクリックするとチェックボックスが反応する。

CSSの疑似要素とは？

CSSの疑似要素とは、「HTMLには書かれていない要素（もどき）を作るカラクリ」である。疑似要素にはbeforeとafterがありそれぞれに「::」（コロンを2つ）を前知する。

「::before」で要素の直前に追加する内容を定義する。「::after」で要素の直後に追加する内容を定義する。

例

.pseudo-element::before {
  content: 'ロビンソンクルーソー';
  color:#00ff00;
}
.pseudo-element::after {
  content: 'の冒険';
  color:#ff0000;
}

<div class="pseudo-element">元の文字列</div>

と記述すると、

となる。

チェックボックスがオシャレになるようにCSSを考える

装飾を入れるチェックボックスの元ネタを定義する。

<div class="decoration-cb">
  <input type="checkbox" id="cb1" value="1"><label for="cb1">寿限無寿限無</label>
  <input type="checkbox" id="cb2" value="2" checked><label for="cb2">五劫のすりきれ</label>
  <input type="checkbox" id="cb3" value="3"><label for="cb3">海砂利水魚の水行末</label>
</div>

CSSの定義

ここではチェックボックスに装飾を入れるCSSを4つのパートに分ける。

セレクタの先頭に「 .decoration-cb 」を入れることで「decoration-cbの配下」を指定する。

チェックボックスを消す

/* 元々のチェックボックスを消す */
.decoration-cb input[type="checkbox"] {
  display: none;
}

自前の□を表示するため、元々表示されている□を非表示にする。

ラベル領域の定義

/* ラベルの定義 */
.decoration-cb input[type="checkbox"]+label {
  padding-left: 25px;
  padding-right: 10px;
  cursor: pointer;
  position: relative;
  display: inline-block;
}

自前の□を定義するための、ラベルの領域の定義をする。

padding-leftと padding-rightでラベル文字列の左右の隙間を作る。padding-leftは□の分だけ値を大きくする。
displayでラベル文字列の幅に合わせた大きさにする。

自前のチェックボックスの定義

/* ラベルの左に表示する正方形のボックス□ */
.decoration-cb input[type="checkbox"]+label::before {
  content: "";
  display: block;
  border: 1px solid;
  border-color:  #585753;
  background-color: #FFF;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -10px;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
}

ラベル文字列の左に□を表示する。
input[type=”checkbox”]+labelが「ラベル文字列を意味」し、::beforeで「ラベル文字列の左に表示するものを定義する」ことになる。

文字は表示しないのでcontentは””にする。また、displayでブロック要素にする。
border、border-color、background-colorで□を定義する。
position、left、top、margin-topで□の位置を調整する。
width、heightで□の大きさを調整する。
box-sizing　でpaddingとborderを幅と高さに含める。

チェックボックスがオンになったときの定義

/* チェックが入った時のレ点 */
.decoration-cb input[type="checkbox"]:checked+label::after {
  content: "";
  width: 18px;
  height: 9px;
  border-bottom: 3px solid;
  border-left: 3px solid;
  transform: rotate(-45deg);
  position: absolute;
  top: 50%;
  left: 3px;
  margin-top: -9px;
  box-sizing: border-box;
  display: block;
  border-color:  #555555;
}

チェックボックスがオンになったときの「レ」マークを定義する。

input[type=”checkbox”]:checked+labelが「チェックが入った状態のときの、ラベル文字列」を意味し、これに::afterを付けることで「『チェックが入った状態のときの、ラベル文字列』の右に表示するものを定義する」になる。

文字は表示しないのでcontentは””にする。
width、height、border-bottom、border-leftでレの元の形を定義する。
transformで回転させてレらしくする。
position、top、left、margin-topで位置を合わせる。
box-sizingでpaddingとborderを幅と高さに含める。
border-colorで「レ」に着色する。

デモ

チェックボックスを表示するとこうなる。

おまけ

チェックボックスの□を〇にしたいとき、□やレに色を付けたいときはそれぞれ定義を追加する。

□を○にしたいとき

□を丸くしたいときは、角丸の定義↓を追加する。

.decoration-cb input[type="checkbox"]+label::before {
    border-radius: 50%;
}

着色したいとき

□やレに色を付けたいときはそれぞれ定義を追加する。

□に色を付けたいときは、border-colorで枠の色を、background-colorで□の中の色を定義する。

.decoration-cb input[type="checkbox"]+label::before {
  border-color: #ff0000;      /* 枠の色 */
  background-color: #ffff55;  /* 中の色 */
}

レに色を付けたいときは、border-colorで定義する。

.decoration-cb input[type="checkbox"]:checked+label::after {
  border-color: #ff0000;
}