改变checkbox样式

html中的单选框和复选框的丑是有目共睹的 记录下怎么去改变样式

第一步，上html代码   此次label的for的值对应的是你需要操作的input的id

<form action="">
        <input type="text"><br/><br/>
        <input type="text"><br/><br/>
        <label for="ipt">
            <input type="checkbox" id="ipt">
            <span></span>
        </label>
</form>

第二步，先设置checkbox隐藏

#ipt{
   display: none;
}

第三步，然后给label设置默认样式

#ipt +span{
           display: inline-block;
           width: 20px;
           height: 20px;
           border: 2px #666 solid;
           border-radius: 6px;
           color: red;
       }

第四步，设置复选框选中状态

#ipt[type=checkbox]:checked+span::after{
        content: '2764';
        position: absolute;
        font-size: 14px;
        left: 13px;
       }

content表示的特殊字符，可参考别的这篇博客

亲测 上面这种方法只能使用一个选框多了则会出bug  暂时没时间解决

有空我在去解决一下  下面这个用图片的就简单很多

input[type='checkbox'] {
      width: 20px;
      height: 20px;
      background-color: #fff;
      -webkit-appearance: none;
      border: 1px solid #c9c9c9;
      border-radius: 5px;
      outline: none;
    }
    input[type=checkbox]:checked {
      background-image:url('https://timgsa.baidu.com/timg?    image&quality=80&size=b9999_10000&sec=1584980705993&di=c8da4ec327f089df72ea8edcf57cb9c4&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201607%2F29%2F20160729214058_mJyRt.jpeg');
      background-size: 20px 20px;
    }