关于无法修改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设置了复选框的大小，虽然外观上复选框的样式不变，但实际上他的触发范围会变大了，大家有空可以试试。