STUDIO KEY CSSサンプル

ラジオボタンやチェックボックスを格好良くする(2)

/* ラジオボタンは非表示にする */
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;
}