CSS3は、色々と特殊なデザインができるようになりました。

そこで、今回は、チェックボックスをオリジナルの画像にする方法です。

【デモ】

• データ1
• データ2
• データ3

【HTML】

<ul id="checbox">
<li>
<input type="checkbox" name="" value="" id="1">
<label for="1">データ1</label>
</li>
<li>
<input type="checkbox" name="" value="" id="2">
<label for="2">データ2</label>
</li>
<li>
<input type="checkbox" name="" value="" id="3">
<label for="3">データ3</label>
</li>
</ul>

【CSS】

#checbox {
  width:200px;
  border:1px solid #c0c0c0;
}

#checbox li {
  position:relative;
  border-bottom:1px solid #c0c0c0;
}

#checbox li:last-child {
  border-bottom:none;
}

#checbox li input[type="checkbox"] {
  display:none;
}

#checbox li label {
  display: block;
  padding: 10px 10px 10px 40px;
  cursor:pointer;
}

#checbox li label:after {
  content: "";
  width: 30px;
  height: 30px;
  background-size: 30px;
  background-image:  url(http://www.poroanet.com/img/blog/c_off.gif);
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  margin: -18px 0 0 0;
  left: 5px;
}

#checbox li input[type="checkbox"]:checked + label {
  background-color:#060;
  color:#fff;
}

#checbox li input[type="checkbox"]:checked + label:after {
	background-image:url(http://www.poroanet.com/img/blog/c_on.gif);
}

まず、「input」をCSSの「display:none」で隠します。

そして、「:after」で疑似的に画像でチェックボックスを作成し :checked を使用することで「チェックした時」という疑似クラスを使用しています。

また、「＋」で隣接するクラスを指定します。 この疑似クラスで、labelの色と:afterの画像を変更しています。

cssのみで作成していますので、サイトも重くならず、かなり使い勝手がいいので、是非活用してください。

ただ、CSS3で作成していますのでIE8以下や古いブラウザには対応していない可能性が高いので注意が必要です。