设置复选框为完全透明,修改label样式代替复选框。
之所以选择这种方法,主要还是因为label可以关联上复选框,同时可以调出所需要的样式效果并显示出来。
CSS代码:
/*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;
}
1 HTML代码:
2 <label id="formyCheckBox" for="modeCheckBox" onclick="changeCheckbox()" class="comList_forCheckbox"></label>
3 <input type="checkbox" id="myCheckBox" class="comList_checkbox" />
如果通过css设置了复选框的大小,虽然外观上复选框的样式不变,但实际上他的触发范围会变大了,大家有空可以试试。