關於無法修改CheckBox樣式的解決方案

在這里開始記錄前端的學習記錄~ 以及一些個人經驗想法神馬的~

好好奮斗啦哈哈~

 

ok,go to the point.

最近遇到要修改復選框樣式的問題，但是系統默認是無法更改到樣式的，所以就坑爹了..

網上搜到有許多解決方法，其中大部分都是模擬checkbox以實現自己想要的效果

從各種解決方法中選了一個自己覺得最妥當的解決方法，下面是我最終采用的方法：

　　設置復選框為完全透明，修改label樣式代替復選框。

之所以選擇這種方法，主要還是因為label可以關聯上復選框，同時可以調出所需要的樣式效果並顯示出來。

話不多說post代碼+效果~

CSS代碼：  2 　　/*CheckBox樣式*/
　　.comList_checkbox
　　{
    　　opacity:0;
　　}
　　/*label樣式*/
　　.comList_forCheckbox
　　{
　　    width:20px;height:20px;
　　    color:Red;cursor:pointer;
  　　  text-align:center;
　　    font:bold 20px/100% '宋體';
 　　   display:inline-block;
 　　   border-radius:.2em;
 　　   -webkit-box-shadow:inset .08em .08em .1em #000;
 　　   background-color:#fff;
　　}

HTML代碼：
　　<label id="formyCheckBox" for="modeCheckBox" onclick="changeCheckbox()" class="comList_forCheckbox"></label>
　　<input type="checkbox" id="myCheckBox" class="comList_checkbox" />

function changeCheckbox() {
    var mylabel = document.getElementById('formyCheckBox');
    if (mylabel.innerHTML == "√")
       mylabel.innerHTML = "";
    else
       mylabel.innerHTML = "√";
}

 

另外：

　　如果通過css設置了復選框的大小，雖然外觀上復選框的樣式不變，但實際上他的觸發范圍會變大了，大家有空可以試試。