Bootstrap3でチェックボックスやラジオボタンを装飾したい

簡単なWebの画面を作る時に良く使っているフレームがBootstrapなのですが、フォームのチェックボックスやラジオボタンは標準の状態では少々物足りない感じがします。そもそも一切の装飾が施されていません。そこで、今回はこれらのカスタマイズをすることにしました。

手っ取り早くやるならFlat UI

Flat UI - Free Bootstrap Framework and Theme

Flat UI Kit Free is a Twitter Bootstrap Framework design and Theme, this responsive framework includes a PSD and HTML ve...

designmodo.github.io

Bootstrapのデザインをリッチに変えてくれるものです。色々と凄そうですが、今回カスタマイズするチェックボックスやラジオボタン以外も変わってしまうのは困るし、その部分だけを抜き出すのも面倒です。

先人が残してくれたカスタマイズ方法

最も簡単だと思われるであろうやり方がありました。

CSSでラジオボタンとチェックボックスをデザインする
http://qiita.com/HikaruSasaki/items/36032eb90f28c1e59d0b

気づくとは思いますが（私は最初何も考えておらず気づかなかった）、そのまま貼り付けても効きません。

アイコンフォント（http://ionicons.com/）をロードする必要があります。

また、Bootstrapでの標準の書き方（labelとinputを”checkbox”or”radio”というクラス名を付けたdivで囲む記述）に習って書くと、囲んでいるdivそのものが非表示になってしまうので、CSS, HTML共にクラス名を修正します。

.cs_checkbox {
  display: none;
}
.cs_checkbox + .checkbox-icon {
  position: relative;
  vertical-align: middle;
}
.cs_checkbox + .checkbox-icon:before {
  content: "\f372";
  font-family: "Ionicons";
  color: #ccc;
  font-size: 1.25em;
  vertical-align:middle;
}
.cs_checkbox:checked + .checkbox-icon:before {
  content: "\f374";
  color: #17bcdf;
}
.cs_radio {
  display: none;
}
.cs_radio + .radio-icon:before {
  content: "\f3a6";
  font-family: "Ionicons";
  color: #ccc;
  font-size: 1.25em;
  vertical-align:middle;
}
.cs_radio:checked + .radio-icon:before {
  content: "\f3a7";
  color: #17bcdf;
}

<link rel="stylesheet" type="text/css" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<div class="checkbox">
  <label>
    <input type="checkbox" class="cs_checkbox">
    <span class="checkbox-icon"></span>
   Checkbox
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" class="cs_radio" name="optionsRadios" id="optionsRadios1" value="option1">
    <span class="radio-icon"></span>
    Radio
  </label>
</div>