一、背景
設計獅童鞋總是會設計各種高大上的效果圖，比如下面這個土豪金的效果。
該圖中“已閱讀並同意相關服務條款”前面的復選框有一個金色的邊框，打鈎時是一個金色的對勾。接下來說說怎樣實現該效果。
二、解決方法
1、純css解決方法
在css3 選擇器（三）一文中介紹過一個選擇器【:checked】選擇器。
單選按鈕和復選按鈕都有選中和未選中狀態。要設置這兩個按鈕默認樣式稍微復雜點。該文通過: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>
模擬實現一個選中和未選中的樣式。
沒有樣式時的效果圖如下，
最終添加樣式后效果如下。
實際開發中，我嘗試使用這種方法。
這種方法有個問題：點選框時無法選中，必須點文字才能選中 。
這在實際應用中肯定是無法忍受的,實際應用中推薦第二種方法。
2、配合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>
效果：
3、配合js簡化版[update20161223]
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");
}
});
三、總結
單選框樣式和復選框原理是類似的。上面辦法都是一種模擬實現。
正如我在::before和::after偽元素的用法 一文中說過，早在10年我們會使用::before和::after來實現多背景圖片，現在css3多背景已成為標准；我們對復選框樣式的模擬實現也許會推動它成為標准，這也就是我們為后人做的貢獻了，讓他們工作更輕松。
還有一點我想說的是推動前端技術發展的，不僅有前端同行們，還有我們可愛的設計師們。如果只有前端，我們會停留在已有技術的可行性上做一些保守的效果，但是有了設計師的“完美主義”，讓我們腦洞大開，挑戰自我，促進技術更上一層樓。
本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載注明出處：http://www.cnblogs.com/starof/p/4904929.html有問題歡迎與我討論，共同進步。