設置復選框為完全透明,修改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設置了復選框的大小,雖然外觀上復選框的樣式不變,但實際上他的觸發范圍會變大了,大家有空可以試試。