淘宝手机端checkbox选择特效

css:

input[type="checkbox"]{appearance: none; -webkit-appearance: none;outline: none;display:none}

label{width:100px;height:100px;display:inline-block;cursor:pointer;}

label input[type="checkbox"] + span{width:20px;height:20px;display:inline-block;background:url(http://sandbox.runjs.cn/uploads/rs/216/0y89gzo2/checkbox_01.gif)  no-repeat;background-position:0 0;}

label input[type="checkbox"]:checked + span{background-position:0 -21px}


html:

<label><input type = "checkbox"><span></span></label>


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容