根据需求设计复选框所需要的样式

关注小编微信公众号公众号【前端基础教程从0开始】回复“1”，拉你进程序员技术讨论群，群内有大神，可以免费提供问题解答。公众号回复“小程序”，领取300个优秀的小程序开源代码+一套入门教程。公众号回复“领取资源”，领取300G前端，Java，产品经理，微信小程序，Python等资源合集大放送，让我们一起学前端。

这是我开发时所摸索到的方法，非常好用！

话不多说，直接上代码，分享给大家。

css中引入下列代码

/*复选框选中前的样式*/
input[type="checkbox"] {
    -webkit-appearance: none;  /*清除复选框默认样式*/
    background-image: url(../img/recommended_invitation/btn_unselected@2x.png);/*复选框背景图像样式*/
    background-size: 0.32rem 0.32rem;/*复选框背景图像大小*/
    height: 0.32rem;   /*高度*/
    width: 0.32rem;
    outline: none;/*外边框样式去除*/
 }
 /*复选框选中后的样式*/
 input[type="checkbox"]:checked {
    background-image: url(../img/recommended_invitation/btn_selected@2x.png);
    background-size: 0.32rem 0.32rem;
    -webkit-appearance: none;  /*清除复选框默认样式*/
    outline: none;
 }