ラジオボタンを格好よくデザインする

レスポンシブにコーディングすると、スマートフォンでチェックし難いラジオボタンやチェックボックスをどうにかしたいと考える人は多いと思います。

色々な方が素晴らしいデザインを公開していますので、それを使うのも一手、ただ、オリジナルでデザインしたいと思うと、ちょっと凝りすぎているケースもちらほら。ましてそれを解説しても二番煎じなので、ここではシンプルに考える事にします。

サンプル

チェックされた方の背景色を変更するだけ、というシンプルなもの。

/* ラジオボタンは非表示にする */
input[type=radio] {
  display: none; 
}
/* チェックされた時のスタイル */
input[type="radio"]:checked + label {
  background: #0063A4;
  color: #FFF; 
}
/* マウスオーバーしたときのスタイル */
.label:hover {
  background-color: #E2EDF9; 
}
/* lableのスタイル */
.label {
  color: #000;
  border: #dddddd solid 2px;
  display: block;
  height: 45px;
  line-height: 45px;
  padding-left: 20px;
  padding-right: 20px;
  cursor: pointer; 
}

ラジオボタンを非表示にし、ラベルのスタイルをそれぞれ変更するだけ。

で、チェックされた事をもう少しデザインしたい！という場合は、背景画像をそれぞれ設定してえば、ある程度はデザイン可能です。

サンプル

/* ラジオボタンは非表示にする */
input[type=radio] {
  display: none; 
}
/* チェックされた時のスタイル */
input[type="radio"]:checked + label {
  background: #0063A4;
  color: #FFF; 
  background-image: url("rdo2.png");
  background-repeat: no-repeat;
}
/* マウスオーバーしたときのスタイル */
.label:hover {
  background-color: #E2EDF9; 
}
/* lableのスタイル */
.label {
  color: #000;
  border: #dddddd solid 2px;
  display: block;
  height: 45px;
  line-height: 45px;
  padding-left: 40px;
  padding-right: 20px;
  cursor: pointer; 
  background-image: url("rdo1.png");
  background-repeat: no-repeat;
}

ラベルに対して背景画像を指定しているだけ。

:afterや:beforeを使うって手も当然あるのですが、あまり凝っても自己満足にしかなりませんので、画像の方が楽です。