checkbox復選框可能是網站中常用的html元素，但大多數人並不滿意它的默認樣式，這篇文章就講講如何實現input checkbox復選框控件 樣式美化效果。
方案一：純css方法
單選按鈕和復選按鈕都有選中和未選中狀態。要設置這兩個按鈕默認樣式稍微復雜點。該文通過:checked選擇器配合其他表情實現自定義樣式。舉例：使用:checked選擇器模擬實現復選框樣式。
<meta charset="utf-8"> <style type="text/css"> form { border: 1px solid #ccc; padding: 20px; width: 300px; margin: 30px auto; } .wrapper { margin-bottom: 10px; } .box { display: inline-block; width: 20px; height: 20px; margin-right: 10px; position: relative; border: 2px solid orange; vertical-align: middle; } .box input { opacity: 0; } .box span { position: absolute; top: -10px; right: 3px; font-size: 30px; font-weight: bold; font-family: Arial; -webkit-transform: rotate(30deg); transform: rotate(30deg); color: orange; } input[type="checkbox"] + span { opacity: 0; } input[type="checkbox"]:checked + span { opacity: 1; } </style> <form action="#"> <div class="wrapper"> <div class="box"> <input type="checkbox" checked="checked" id="username" /><span>√</span> </div> <label for="username">我是選中狀態</label> </div> <div class="wrapper"> <div class="box"> <input type="checkbox" id="userpwd" /><span>√</span> </div> <label for="userpwd">我是未選中狀態</label> </div> </form>
資源網站大全 https://55wd.com
這種方法有個問題：點選框時無法選中，必須點文字才能選中 。
效果如下：
方案二：配合js解決方法
原理：label和input外面套一層.custom-checkbox作為父元素相對定位。
input絕對定位於左上角，label也絕對定位於左上角，覆蓋input的方塊。通過給label設置padding-left和背景圖來模擬未選中狀態。選中時加一個.right類更改背景圖片為選中狀態的背景圖。通過js點擊事件，label被點擊時在選中與未選中狀態切換。
用到圖片：
代碼如下：
<meta charset="utf-8"/> <style type="text/css"> .custom-checkbox{ border:1px solid red; position:relative; height:30px; } .custom-checkbox input{ position:absolute; } .custom-checkbox label{ padding-left:20px; position:absolute; top:-1px; left:0; background:url(images/bg-unchecked.png) no-repeat top 4px left 3px; } .custom-checkbox label.right{ background:url(images/bg-checked.png) no-repeat top 2px left 3px; } </style> <body> <div class="custom-checkbox"> <input type="checkbox" id="test"/><label for="test">已閱讀並同意相關服務條款</label> </div> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/JavaScript"> $('.custom-checkbox label').click(function(){ if($(this).hasClass('right')){ $('.custom-checkbox label').removeClass("right"); }else{ $('.custom-checkbox label').addClass("right"); } }); </script> </body>
問題：點擊頻率過快，會雙擊選中文字，影響用戶體驗。
解決辦法：
<label for="test" onselectstart="return false;" style="-moz-user-select:none;">已閱讀並同意相關服務條款</label>效果如下：
方案三：配合js簡化版
2的方案用2次絕對定位有點麻煩，因為用了<input type="checkbox">的復選框，如果要求沒那么復雜，簡單用的<i>標簽模擬一下復選框也一樣可以實現效果。
html:
<label class="agree-label" onselectstart="return false;" style="-moz-user-select:none;"> <i class="cus-checked"></i>同意 <a href=":;" target="_blank">某某服務條款</a> </label>
css:
.agree-label { display: inline-block; font-size: 18px; } .agree-label i { display: inline-block; width: 21px; height: 22px; margin-bottom: -4px; margin-right: 6px; background: url(images/checkedbox.png) no-repeat; } .agree-label i.cus-checked { background-position: 0 -22px; }
js:
$('.agree-label').click(function() { if ($('.agree-label i').hasClass('cus-checked')) { $('.agree-label i').removeClass("cus-checked"); } else { $('.agree-label i').addClass("cus-checked"); } });
第三種方案兼容IE8。