关于无法修改CheckBox样式的解决方案

在这里开始记录前端的学习记录~ 以及一些个人经验想法神马的~

好好奋斗啦哈哈~

 

ok,go to the point.

最近遇到要修改复选框样式的问题，但是系统默认是无法更改到样式的，所以就坑爹了..

网上搜到有许多解决方法，其中大部分都是模拟checkbox以实现自己想要的效果

从各种解决方法中选了一个自己觉得最妥当的解决方法，下面是我最终采用的方法：

　　设置复选框为完全透明，修改label样式代替复选框。

之所以选择这种方法，主要还是因为label可以关联上复选框，同时可以调出所需要的样式效果并显示出来。

话不多说post代码+效果~

 1 CSS代码：
 2 　　/*CheckBox样式*/
 3 　　.comList_checkbox
 4 　　{
 5     　　opacity:0;
 6 　　}
 7 　　/*label样式*/
 8 　　.comList_forCheckbox
 9 　　{
10 　　    width:20px;height:20px;
11 　　    color:Red;cursor:pointer;
12   　　  text-align:center;
13 　　    font:bold 20px/100% '宋体';
14  　　   display:inline-block;
15  　　   border-radius:.2em;
16  　　   -webkit-box-shadow:inset .08em .08em .1em #000;
17  　　   background-color:#fff;
18 　　}
1 HTML代码：
2 　　<label id="formyCheckBox" for="modeCheckBox" onclick="changeCheckbox()" class="comList_forCheckbox"></label>
3 　　<input type="checkbox" id="myCheckBox" class="comList_checkbox" />
1 function changeCheckbox() {
2     var mylabel = document.getElementById('formyCheckBox');
3     if (mylabel.innerHTML == "√")
4        mylabel.innerHTML = "";
5     else
6        mylabel.innerHTML = "√";
7 }

 

另外：

　　如果通过css设置了复选框的大小，虽然外观上复选框的样式不变，但实际上他的触发范围会变大了，大家有空可以试试。

posted @ 2012-08-22 15:08  ﹏風﹖﹍  Views(17508)  Comments(1)  Edit  收藏  举报