css+图片美化checkbox

作者: 漫漫江雪 | 来源:发表于2018-06-26 09:54 被阅读0次

css+图片美化checkbox
checkbox 样式美化
checkBox的美化
自定义CheckBox样式自定义样式View(一)
css 对 checkbox 美化
input checkbox样式美化
使用label美化checkbox
checkbox美化成switch
非常有用的CSS代码片段
input type=file 上传文件样式美化

默认的checkbox样子大部分时候都是不尽如人意，看上去都比较丑，单独去找个插件来使用，又不够零活，
用纯css去美化也不是特别如意（处理兼容及样式代码比较多），使用图片的方式还是比较简单
最终效果：

image.png

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>checkbox css change</title>
<style>
    .customcb label{
        display:inline-block;
        width:120px;
        height:50px;
        line-height:.8rem;
        text-align:left;
        position: relative;
        cursor:pointer;
    }
    .customcb label input{
        width: 15px;
        height: 15px;
        vertical-align: bottom;
        margin-right:.2rem;
        opacity: 0;
    }
    .customcb .spot{
        display:inline-block;
        width:24px;
        height:24px;
        background:url("checkbox-default.png") no-repeat;  /*默认的样式图片*/
        background-size:24px;
        position: absolute;
        top:.2rem;
        left:0;
        z-index:5;
        transition:all .1s;
    }
    .customcb input:checked + .spot{
        background:url("checkbox-checked.png") no-repeat;  /*选中后的样式图片*/
        background-size:24px;
    }
</style>
</head>
<body>
    <div class="customcb">
        <label><input type="checkbox" name="1"><i class="spot"></i>人口密度</label>
        <label><input type="checkbox" name="1"><i class="spot"></i>房屋密度</label>
    </div>
</body>
</html>

图片来源于：http://iconfont.cn，搜索checkbox（下载的时候设置好大小和颜色）