前言
今天給大家分享一種爲複選框添加樣式的方式，由於只爲提供一種思路，對於不同背景圖示例代碼在各個瀏覽器之間運行起來樣式會存在一些偏差，這裏不作考慮，但是這種方式是兼容所有瀏覽器的，廢話少說，上代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--這是一個reset的樣式-->
<link rel="stylesheet" href="./normalize.min.css">
<style>
#checkbox{
width:100%;height:100%;
opacity:0;/*關鍵：透明度設爲零*/
filter:alpha(opacity=0);
-moz-opacity:0;
-webkit-opacity:0;
}
#checkIcon{
width:16px;height:16px;
display:inline-block;
vertical-align:middle;
background-image:url(./big.png);
background-repeat:no-repeat;
}
label{
font-size:14px;
}
.uncheck{
background-position:-138px 0;
}
.check{
background-position:-167px 0;
}
</style>
</head>
<body>
<span id="checkIcon" class="uncheck"><input type="checkbox" id="checkbox"></span><label for="checkbox">自定義複選框樣式</label>
<script>
var checkIcon = document.getElementById('checkIcon');
var checkbox = document.getElementById('checkbox');
checkIcon.onclick = function() {
checkbox.checked ? checkIcon.className = 'check' : checkIcon.className = 'uncheck';
}
</script>
</body>
</html>代碼中利用一個span作爲背景來顯示覆選框的新樣式，通過改變span的class屬性來改變複選框的狀態，用一個label標籤與複選框關聯，好讓點擊文字時依然能改變複選框的狀態，需要的注意的是，這裏的複選框的樣式要設爲opacity:0，而不是visibility:hidden，更不是display:hidden,不然複選框本身將無法點擊改變狀態，出現一些麻煩。