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

设置复选框为完全透明,修改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   
3   

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

你可能感兴趣的:(关于无法修改CheckBox样式的解决方案)