概述
在頁面設計時，我們經常使用input複選框。由於界面設計的需要，我們需要修改複選框的樣式，使得界面更美觀或者適應新的需求。由於CheckBox僞類修改比較複雜，通常修改的方式有兩種，一個是鏈入圖片，另一個是使用純css的方法進行修改。鏈入圖片的設計方式比較簡單，但是需要預先設計或者下載圖片，比較麻煩。純css的方法，只需要在css文件中編寫代碼，個人覺得比較方便，因此，本文使用該方式對input中的CheckBox進行設置。
實現效果
本文在設計時，希望達到以下效果，如圖所示，每個帶顏色的方塊都是有input框組成，每個input框的背景色不同，並且，再點擊時，只能同時選中一個input框（實現效果相當於radio）。
實現步驟
1、單個input[type=checkbox]樣式修改
在設計時，我們使用<lable>標籤的for屬性，綁定到input標籤上（for屬性應對應到input標籤中的id）。在jsp代碼中設計如下所示：
<input id="color-input-red" class="chat-button-location-radio-input" type="checkbox" name="color-input-red" value="#f0544d" /> <label for="color-input-red"></label >
接下來我們在css文件中設置lable標籤的顯示樣式：
/*lable標籤的大小、位置、背景顏色更改，在css選擇時，“+”代表相鄰元素，即當前元素的下一元素*/ #color-input-red +label{ display: block; width: 20px; height: 20px; cursor: pointer; position: absolute; top: 2px; left: 15px; background: rgba(240, 84, 77, 1);; } /*當input框爲選中狀態時，lable標籤的樣式，其中在css選擇時，“：”表示當前input框的值，即checked； 該部分主要對顯示的“對號”的大限居中方式，顯示顏色進行了設置*/ #color-input-red:checked +label::before{ display: block; content: "\2714"; text-align: center; font-size: 16px; color: white; }
其中裏面的content表示在方框中顯示的內容，"\2714"、"\2713"都表示對號，只是顯示的瘦弱程度不同，大家可以在調試的時候，選擇其中一個。對於css中的內容，我們可以根據需要設置爲自己的內容。
最後我們在css中將原先的input[type=checkbox]的內容進行隱藏。
input[type=checkbox]{ visibility: hidden; }
最終的顯示效果如下：
2、實現多個input框樣式的調整
單個input框實現完成以後，同理，其他的input框實現也據此實現。使用的jsp代碼如下（裏面的div標籤只是爲佈局使用）：
<div class="chat-windows-color-div row"> <div class="col-xs-4 col-sm-4 col-md-4"> <div class="col-xs-2 col-sm-2 col-md-2"> <input id="color-input-red" class="chat-button-location-radio-input" type="checkbox" name="color-input-red" value="#f0544d" /> <label for="color-input-red"></label > </div> <div class="col-xs-2 col-sm-2 col-md-2"> <input id="color-input-orange" class="chat-button-location-radio-input" type="checkbox" name="color-input-orange" value="#ea9836" /> <label for="color-input-orange"></label > </div> <div class="col-xs-2 col-sm-2 col-md-2"> <input id="color-input-yellow" class="chat-button-location-radio-input" type="checkbox" name="color-input-yellow" value="#e6c03a" /> <label for="color-input-yellow"></label > </div> <div class="col-xs-2 col-sm-2 col-md-2"> <input id="color-input-green" class="chat-button-location-radio-input" type="checkbox" name="color-input-green" value="#5fbd41" /> <label for="color-input-green"></label > </div> <div class="col-xs-2 col-sm-2 col-md-2"> <input id="color-input-blue" class="chat-button-location-radio-input" type="checkbox" name="color-input-blue" value="#3daae6" /> <label for="color-input-blue"></label > </div> <div class="col-xs-2 col-sm-2 col-md-2"> <input id ="color-input-purple" class="chat-button-location-radio-input" type="checkbox" name="color-input-purple" value="#c37ad3" /> <label for="color-input-purple"></label> </div> </div> </div>
css代碼如下如所示：
/*input框中顏色更改*/ #color-input-red +label{ display: block; width: 20px; height: 20px; cursor: pointer; position: absolute; top: 2px; left: 15px; background: rgba(240, 84, 77, 1);; } #color-input-red:checked +label::before{ display: block; content: "\2714"; text-align: center; font-size: 16px; color: white; } input[type=checkbox]{ visibility: hidden; } #color-input-orange +label{ display: block; width: 20px; height: 20px; cursor: pointer; position: absolute; top: 2px; left: 15px; background: rgba(234, 152, 54, 1); } #color-input-orange:checked +label::before{ display: block; content: "\2714"; text-align: center; font-size: 16px; color: white; } #color-input-yellow +label{ display: block; width: 20px; height: 20px; cursor: pointer; position: absolute; top: 2px; left: 15px; background: rgba(230, 192, 58, 1); } #color-input-yellow:checked +label::before{ display: block; content: "\2714"; text-align: center; font-size: 16px; color: white; } #color-input-green +label{ display: block; width: 20px; height: 20px; cursor: pointer; position: absolute; top: 2px; left: 15px; background: rgba(95, 189, 65, 1); } #color-input-green:checked +label::before{ display: block; content: "\2714"; text-align: center; font-size: 16px; color: white; } #color-input-blue +label{ display: block; width: 20px; height: 20px; cursor: pointer; position: absolute; top: 2px; left: 15px; background: rgba(61, 170, 230, 1); } #color-input-blue:checked +label::before{ display: block; content: "\2714"; text-align: center; font-size: 16px; color: white; } #color-input-purple +label{ display: block; width: 20px; height: 20px; cursor: pointer; position: absolute; top: 2px; left: 15px; background: rgba(195, 122, 211, 1); } #color-input-purple:checked +label::before{ display: block; content: "\2714"; text-align: center; font-size: 16px; color: white; }
此時的效果爲：
顏色可以全部改變，但是可以全部選中，無法保證只能選擇其中一個，爲了實現該功能，我們添加js代碼。思路爲：當點擊其中一個複選框時，我們將所有的複選框都進行取消選中處理，然後對當前的複選框單獨添加選中狀態。
//取消掉所有選擇的顏色 function cancelChooseColor( clickId ){ var inputColor = $('#color-input-green').parents(".chat-windows-color-div ").find("input"); for(var i=0;i<inputColor.size();i++){ inputColor[i].checked=false; } //選中點擊的元素 $(clickId)[0].checked=true; //獲取選中元素的color值 var color =$(clickId).val(); $('#color-input-diy-value').val(color); } $(document).on("click","#color-input-red",function(){ cancelChooseColor("#color-input-red"); }) $(document).on("click","#color-input-orange",function(){ cancelChooseColor("#color-input-orange"); }) $(document).on("click","#color-input-yellow",function(){ cancelChooseColor("#color-input-yellow"); }) $(document).on("click","#color-input-green",function(){ cancelChooseColor("#color-input-green"); }) $(document).on("click","#color-input-blue",function(){ cancelChooseColor("#color-input-blue"); }) $(document).on("click","#color-input-purple",function(){ cancelChooseColor("#color-input-purple"); })
至此，我們實現了只能選擇其中一個功能。如圖所示
參考資料：
1、自定義input[type="checkbox"]的樣式。