複選框 Checkbox 是 Web 應用常用控制元件，隨處可見，原生的複選框控制元件一般不能滿足我們的需求，設計師喜歡一些漂亮的圖片，用css做出此效果。

<input type="checkbox" id="gps_open_close" /> 	


input#gps_open_close[type="checkbox"]{<span style="color:#FF0000;">-o-appearance: none; -webkit-appearance: none;-moz-appearance:none;</span>
background-image:url("../../images/pc/gps/select_button.png");vertical-align: middle;
width:19px;height:19px; background-repeat: no-repeat;}

input#gps_open_close[type="checkbox"]:checked{
	background-image:url("../../images/pc/gps/selected_button.png");
}

 

input[type="checkbox"]{
	-o-appearance: none; -webkit-appearance: none;-moz-appearance:none;
	background-image:url("../../images/pc/gps/checkbox.png");
	width:19px;height:19px; background-repeat: no-repeat;
}
input[type="checkbox"]:focus,
input[type="checkbox"]:hover {
  background-position: -24px 0;
  outline: none;
}

input[type="checkbox"]:checked {
  background-position: -48px 0;
}

input[type="checkbox"][disabled] {
  background-position: -72px 0;
}

input[type="checkbox"][disabled]:checked {
  background-position: -96px 0;
}
 

因為圖片已經事先合併成一張了，簡單修改一下 background-position 就可以了，同時前面幾個選擇器的優先順序（權重）一樣，所以書寫順序很重要。

相容性

目前只相容 Webkit 系列瀏覽器；雖然 Firefox 也實現了替代的 -moz-appearance 屬性，不過控制元件原有的背景顏色、邊框樣式無法修改，暫時也不大好用；IE 系列暫時不支援該屬性，更詳細的相容情況檢視 Caniuse/appearance。因此需要為 IE 瀏覽器清除掉背景圖片的影響：

input[type="checkbox"] {
  background: #fff url(i/blue.png);
  background: none\0;
  *background: none;
  ...
}
 

另外在別人的部落格上學到了新的方法美化checkbox，使用span設定background，radio的原本樣式隱藏

<span class="pay_list_c1 on">
<input type="radio" checked="checked" name="paylist" value="1" class="radioclass">
</span>

.pay_list_c1 {
width: 24px;
height: 18px;
float: left;
padding-top: 3px;
cursor: pointer;
text-align: center;
margin-right: 10px;
background-image: url(images/inputradio.gif);
background-repeat: no-repeat;
background-position: -24px 0;
}
.radioclass {
<span style="color:#FF0000;">opacity: 0;
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);</span>
}
.on {
background-position: 0 0;
}

相關文章：