html css 实现自定义复选框 checkbox

html 默认的复选框样式很难看，于是想着自定义实现checkbox样式

思路是：通过字体图标实现

效果图：

步骤：

1 https://www.iconfont.cn/   字体图标网站，选择复选框 选中和未选中时的图标，并下载下来

2 下载下来解压后文件如下图，把iconfont.ttf 复制到 工程 /font/iconfont.ttf  

3 html 页面 引入字体文件

@font-face {font-family: "iconfont";
  src:url('/fonts/iconfont.ttf?t=2020051102') format('truetype'); 
}

上面步骤完成了字体图标的准备，下面开始 实现复选框的样式

4 去除checkbox自带边框   

       input[type=checkbox]{

            background: none !important;

            background-color: transparent !important;

            outline: none !important;

            -webkit-appearance: none !important;

        }

5 设置选中和未选中时图标     

      input[type=checkbox]:checked:before {

            content: '\edaf';

            font-size: 23px;

            color: #e4393c;

            font-family: "iconfont" !important;

            -webkit-font-smoothing: antialiased;

        }

      input[type=checkbox]:before{

            content: '\e62c';

            font-size: 23px;

            color: #AAAAAA;

            font-family: "iconfont" !important;

            -webkit-font-smoothing: antialiased;

        }

6 说明 伪类 before里的 content: '\e62c'  用的是字体图标，

e62c 的值是怎么确定的？ 图标下载后的压缩包里的iconfont.css 文件看看就知道了

同时要使字体图标生效，必须加上：font-family: "iconfont" !important;    这和引入字体图标时的代码是对应的