自定义复选框

期望效果:


checkbox.jpg

示例代码:
引入JQuery和font-awesome图标


    

CSS

 .checkbox-style{
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        width: 17px;
        height: 17px;
        line-height: 17px;
        box-sizing: border-box;
        border: 1px solid #a0a0a0;
    }
    .hide{
        display: none;
    }
    .show{
        display: inline-block;
    }

HTML:

  

JS:


你可能感兴趣的:(自定义复选框)