首頁 > 開發者 > JavaScript
表單元素——checkbox樣式美化，表單checkbox樣式
一、背景
設計獅童鞋總是會設計各種高大上的，比如下面這個土豪金的效果。
該圖中“已閱讀並同意相關服務條款”前面的複選框有一個金色的邊框，打鉤時是一個金色的對勾。接下來說說怎樣實現該效果。
二、解決方案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>View Code類比實現一個選中和未選中的樣式。
沒有樣式時的如下，
最終添加樣式後效果如下。
實際開發中，我嘗試使用這種方法。
這種方法有個問題：點選框時無法選中，必須點文字才能選中 。
這在實際應用中肯定是無法忍受的,實際應用中推薦第二種方法。
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>
效果：
三、總結單選框樣式和複選框原理是類似的。上面辦法都是一種類比實現。
正如我在::before和::after虛擬元素的用法 一文中說過，早在10年我們會使用::before和::after來實現多背景圖片，現在css3多背景已成為標準；我們對複選框樣式的類比實現也許會推動它成為標準，這也就是我們為後人做的貢獻了，讓他們工作更輕鬆。
還有一點我想說的是推動前端技術發展的，不僅有前端同行們，還有我們可愛的設計師們。如果只有前端，我們會停留在已有技術的可行性上做一些保守的效果，但是有了設計師的“完美主義”，讓我們腦洞大開，挑戰自我，促進技術更上一層樓。
本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載註明出處：http://www.cnblogs.com/starof/p/4904929.html有問題歡迎與我討論，共同進步。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
