現在的在做專案的時候，ui經常會設計出特有的樣式的，這裡使用的方式都是CSS3的偽類方式解決的

1.第一方法：就是用背景圖的方式當做checked的時候的樣式的

body：：：

<h3>利用background用圖片代替checkbox效果</h3>
<div id="container">
<span><input type="checkbox"class="inputCheck" id="checkbox1"><label for="checkbox1"></label></span>
<span><input type="checkbox"class="inputCheck" id="checkbox2"><label for="checkbox2"></label></span>
</div>
 

解釋：這裡使用的方式的span包裹的input和label的標籤，這裡要注意的一點就是 input中的id名字要和label的名字要一樣，不然效果是不會出來的。

css：

#container {height:150px;width:150px;}
#container span {position: relative;}
#container .inputCheck {position: absolute;width: 20px;height: 20px;		
						visibility: hidden;}
#container .inputCheck+label {display: inline-block;width: 20px;height: 20px;
							background: red;}
#container .inputCheck:checked+label {background: url(checkbox.png) no-repeat center center;background-size:20px 20px;} 
 

解釋：這裡最重要的一點就是，把checkbox的原始樣式取消，用新的樣式來代替的，

visibility: hidden; 就是取消樣式的。其他的css程式碼不做多解釋的，那個複選框最初的樣式是紅色的，然後checked的樣式checkbox.png的圖片的。圖片展示：見1.png

第二種方式：

css程式碼：

<style>
 span {position: relative;}
 .inputCheck {position: absolute;visibility: hidden;}
 .inputCheck+label {display: inline-block;width: 16px;height: 16px;border: 1px solid #fd8845;}

 .inputCheck:checked+label:after {content: "";position: absolute;left: 3px;bottom: 10px;width: 9px;height: 4px;border: 2px solid black;
	border-top-color: transparent;border-right-color: transparent;
	-webkit-transform: rotate(-60deg);transform: rotate(-45deg);} 
</style>
 

圖片展示：2.png

第三種方式程式碼和方法一是一樣的 

css在checked時候的程式碼要修改一下的

background: url('/images/common/icon.svg') no-repeat center center #ff7a4f;