SassやCSSでチェックボックスやラジオボタンをカスタマイズする方法

マネーフォワードでフロントエンドの開発をしています頼本です。

前回の「Haml、Sassを使って効率よくコーディングする方法（基礎編）」に引き続き、
今回は、初級編として、マネーフォワードがどのようにHaml、Sassを使っているのか、実戦で使える内容を例にご紹介いたします。

SassやCSSでチェックボックスやラジオボタンをカスタマイズする方法

デフォルトのチェックボックス・ラジオボタンは小さい・・・デザイン的にイケてないので見た目を変更したい・・・そんな要望は多くあると思います。
そこで、今回はinput+labelとSassやCSSで簡単にチェックボックス・ラジオボタンをカスタマイズする方法をご紹介します。

チェックボックス・ラジオボタンのデザインをカスタマイズした時の見た目

チェックボックスのカスタマイズ

チェックボックスのテキスト

ラジオボタンのカスタマイズ

はいいいえ

Haml/HTMLの書き方

まずはHamlの書き方から

Haml

HTML

// チェックボックス
%input#checkbox-id.custom-checkbox{ type: 'checkbox' }
%label{ for: 'checkbox-id' } チェックボックスのテキスト
// ラジオボタン
%input#radio-id-yes.custom-radio{ name: 'custom-radio', type: 'radio', checked: 'checked' }
%label{ for: 'radio-id-yes' } はい
%input#radio-id-no.custom-radio{ name: 'custom-radio', type: 'radio' }
%label{ for: 'radio-id-no' } いいえ

// チェックボックス
<input id="checkbox-id" class="custom-checkbox" type="checkbox">
<label for="checkbox-id">チェックボックスのテキスト</label>
// ラジオボタン
<input id="radio-id-yes" class="custom-radio" name="custom-radio" type="radio" checked="checked">
<label for="radio-id-yes">はい</label>
<input id="radio-id-no" class="custom-radio" name="custom-radio" type="radio">
<label for="radio-id-no">いいえ</label>

ここでのポイントは、必ずidとforを一致させる事、input・labelの順番で記述する事です。

idとforの一致は言わずもがなですが、labelクリック時にforに対応するidを持つinput要素が連動するので、input要素を非表示にしていても、クリックが反映されます。
input・labelを順番に記述する理由は、隣接セレクタを使い、inputの次にあるlabelに見た目を設定するからです。

Sass（SCSS）/CSSの書き方

次にSass（SCSS）の書き方です。
それぞれのコードが何を意味しているかはSass（SCSS）内にコメントで記載します。

Sass（SCSS）

CSS

@mixin custom-input($size, $type) {
  // 見た目は画像を表示するので、input要素は非表示にする
  display: none;
  // 隣接セレクタを使い、inputの次にあるlabelに見た目を設定する
  + label {
    position: relative;
    display: inline-block;
    // 【任意】カスタマイズした要素と文字間隔を空ける。
    padding-left: $size + 5px;
    min-height: $size;
    line-height: $size;
    cursor: pointer;
    &::before {
      position: absolute;
      left: 0;
      top: 0;
      display: inline-block;      
      width: $size;
      height: $size;
      // contentに表示したい画像を指定      
      content: url("#{$type}_off.png");
    }
  }
  // :checkedの擬似クラスでinput要素のチェック状態を取得。labelは接続セレクタを使い、チェック状態用の画像を指定する
  &:checked + label::before {
    content: url("#{$type}_on.png");
  }
  // 【任意】input要素をdisabledにする事がある場合は、disabled用のスタイルを指定
  &:disabled + label {
    opacity: .3;
    cursor: not-allowed;
  }
}

// チェックボックスのカスタマイズ
// 第1引数に画像サイズ、第2引数に画像名を指定
.custom-checkbox {
  @include custom-input(20px, checkbox);
}

// ラジオボタンのカスタマイズ
.custom-radio {
  @include custom-input(18px, radio);
}

// チェックボックスのカスタマイズ
.custom-checkbox {
  display: none;
}
.custom-checkbox + label {
  position: relative;
  display: inline-block;
  margin-right: 5px;
  padding-left: 25px;
  min-height: 20px;
  line-height: 20px;
  cursor: pointer;
}
.custom-checkbox + label::before {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  width: 20px;
  height: 20px;
  content: url("checkbox_off.png");
}
.custom-checkbox:checked + label::before {
  content: url("checkbox_on.png");
}
.custom-checkbox:disabled + label {
  opacity: .3;
  cursor: not-allowed;
}
// ラジオボタンのカスタマイズ
.custom-radio {
  display: none;
}
.custom-radio + label {
  position: relative;
  display: inline-block;
  margin-right: 5px;
  padding-left: 23px;
  min-height: 18px;
  line-height: 18px;
  cursor: pointer;
}
.custom-radio + label::before {
  position: absolute;
  display: inline-block;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  content: url("radio_off.png");
}
.custom-radio:checked + label::before {
  content: url("radio_on.png");
}
.custom-radio:disabled + label {
  opacity: .3;
  cursor: not-allowed;
}

たったこれだけで、文頭に記載したカスタマイズが行えます！
なお、IE8以前の古いブラウザには対応していないので、その点ご注意ください。