CSS自定义绿色复选框按钮样式

    border-right: none;   
    background: transparent;   
    opacity: 0;   
    transform: rotate(-45deg);   
}   
  

好了, 整个状态设置好了. 现在需要在点击复选框的时候让勾号显示出来.下面的代码就可以完成

CSS Code复制内容到剪贴板

.i-check input[type=checkbox]:checked + label:after {   
    opacity: 1;   
}   

写到这里,不要忘记了, 让Input复选框设置其样式, 为了让用户能够点击到, 他的高宽度都要和整体一样大小, 让其在整个盒子的最顶层.这样用户就可以能够随便在这个区域就能点击. OK , 最后一步就是让这个input复选框隐藏起来, 隐藏起来, 不是让他真正的隐藏去掉, 这样的话, 就没有点击效果. 这里隐藏需要的是用opacity来设置为0.

CSS Code复制内容到剪贴板

.i-check input[type=checkbox] {   
    opacity: 0;   
    position: absolute;   
    z-index: 2;   
    left: 0;   
    top: 0;   
    width: 100%;   
    height: 100%;   
    margin: 0;   
}   

好了, 整个效果就完成了, 同理这个也可以去设定单选框的效果。