复选框checkbox实现自定义样式

在实际开发中，时长会遇到这样的问题，checkbox默认的样式有点难看，很多的时候，会更具ui设计图，来改变相应的checkbox的样式，这个时候就可以自定义一个样式了。

方法很简单，首先讲默认的checkbox样式隐藏起来，在用两张准备好的图片（选中状态的图片和未选中的图片）作为复选框checkbox的背景图片就行了。

参考代码：

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>复选框checkbox自定义样式</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <style>
            input[type=checkbox]{
                    appearance:none;
                    -moz-appearance:none; /* Firefox */
                    -webkit-appearance:none;                 
                    cursor: pointer;
                    margin:0;
                }                   
                input[type=checkbox]{
                    width:13px;
                    height:13px;                  
                    background: url(images/check.png);
                    background-size: 100% 100%;
                }           
                input[type=checkbox]:checked{
                    background: url(images/checked.png);
                    background-size: 100% 100%;
                }
    </style>
    </head>
    <body>
        <div class="modal-body form">
            <div class="col-md-7 col-sm-7  col-xs-7">
                <input name="circle" type="checkbox" value="2" />周一
                <input name="circle" type="checkbox" value="3" />周二
                <input name="circle" type="checkbox" value="4" />周三
                <input name="circle" type="checkbox" value="5" />周四
                <input name="circle" type="checkbox" value="6" />周五
                <input name="circle" type="checkbox" value="7" />周六
                <input name="circle" type="checkbox" value="1" />周日             
            </div>
        </div>
    </body>

</html>

这个时候就能达到自己想要的样式的效果了。