纯CSS修改checkbox复选框样式-02

我有用过这个纯修改input属性的

本人修改后的代码和效果图(修的不好),这个是改动最简单的:

css代码

input[type=checkBox]{
    visibility: hidden;
}


input[type="checkBox"]{
    -webkit-appearance: none;
    vertical-align:middle;
    margin-top:0;
    background:#fff;
    border:#999 solid 1px;
    border-radius: 3px;
    min-height: 12px;
    min-width: 12px;
}
input[type="checkBox"]:checked {
    background: #E75213;
}
input[type=checkBox]:checked::after{
    content: ‘\EA06‘;
    top: 3px;
    left: 3px;
    position: absolute;
    background: white;
    border: #fff solid 2px;
    border-top: none;
    border-right: none;
    height: 6px;
    width: 10px;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg); 
    transform: rotate(-45deg);
}

HTML代码

<div>
    <input type="checkBox" />
</div>

 

参考链接:https://blog.csdn.net/qq_27717857/article/details/80684375

 

搜索中其他一些不错的博客; 参考以下博客,但是不够理想

https://blog.csdn.net/u014291497/article/details/52081774

 

这个JS比较复杂,可以参看

https://blog.csdn.net/iteye_19312/article/details/82582849

http://www.freejs.net/demo/214/index.html

 

这个概括类的博客不错

https://blog.csdn.net/hyzhang6/article/details/78780871