我有用过这个纯修改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/
这个概括类的博客不错
https://blog.csdn.net/hyzhang6/article/details/78780871
如对本文有疑问, 点击进行留言回复!!
深入理解CSS background-blend-mode的作用机制
网友评论