我有用过这个纯修改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