CSS スタイルシートの小技等のご紹介

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

2015年7月27日
この記事は掲載から1516日経過しています。
情報が古い可能性が有りますのでご了承下さい

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

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

サンプル

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

/* ラジオボタンは非表示にする */
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を使うって手も当然あるのですが、あまり凝っても自己満足にしかなりませんので、画像の方が楽です。

 

 
  • このエントリーをはてなブックマークに追加
  • LINEで送る

PAGE TOP