目前有很多客製化form element的套件， 但是這次專案只需要客製checkbox及radio， 由於這樣的類子很常用到，就直接在這裡就做個紀錄，方便之後查詢 如何透過CSS來客製化HTML checlbox 及radio buttons

一、下載checks.png

首先，下載checks.png 下載後，請將圖片重新命名為checks.png checks.png

二、建立checkbox 及radio HTML區塊

<!--checkbox-->
<div>
  <input id="option" type="checkbox" name="field" value="option">
  <label for="option">同意</label>
</div>
<!--radio-->
<div>
	<input id="radio1" type="radio" name="radio" value="1" checked="checked"><label for="radio1">是</label>
</div>
<div>
	<input id="radio2" type="radio" name="radio" value="2" checked="checked"><label for="radio2">否</label>
</div>

三、置入checkbox 及 radio CSS

要留意，這裡預設是將圖片放在 images/checks.png

<style>
input[type=checkbox]:not(old),
input[type=radio   ]:not(old){
  width   : 28px;
  margin  : 0;
  padding : 0;
  opacity : 0;
}
input[type=checkbox]:not(old) + label{
  display      : inline-block;
  margin-left  : -28px;
  padding-left : 28px;
  line-height  : 24px;
  background   : url('images/checks.png') no-repeat 0 -48px;
}

input[type=checkbox]:not(old):checked + label{
  background-position : 0 -73px;
}

input[type=radio   ]:not(old) + label{
  display      : inline-block;
  margin-left  : -24px;
  padding-left : 28px;
  line-height  : 24px;
  background   : url('images/checks.png') no-repeat 0 3px;
}
input[type=radio]:not(old):checked + label{
  background-position : 0 -22px;
}
</style>