使用CSS3美化复选框checkbox

通过css3伪元素实现以下样式效果checkbox复选框

image.png

html部分

<div id="header">
   <div id="logo"><h1><a href="http://www.helloweba.com" title="返回helloweba首页">helloweba</a></h1></div>
</div>

<div id="main">
   <h2 class="top_title"><a href="http://www.helloweba.com/view-blog-295.html">使用CSS3美化复选框checkbox</a></h2>
    <div class="demo">
        <div class="wrap">
            <p>1. 勾选</p>
            <input type="checkbox" id="checkbox_a1" class="chk_1" checked /><label for="checkbox_a1"></label>
            <input type="checkbox" id="checkbox_a2" class="chk_1" /><label for="checkbox_a2"></label>
        </div>
        <div class="wrap" style="width:198px">
            <p>2. 单按钮</p>
            <input type="checkbox" id="checkbox_b1" class="chk_2" /><label for="checkbox_b1">我同意</label>
        </div>
        
        <div class="wrap" style="width: 180px;">
            <p>3. 移动端开关</p>
            <input type="checkbox" id="checkbox_c1" class="chk_3" /><label for="checkbox_c1"></label>
            <input type="checkbox" id="checkbox_c2" class="chk_3" checked /><label for="checkbox_c2"></label>
        </div>
        
        <div class="wrap" style="width: 231px;">
            <p>4. 开启和关闭</p>
            <input type="checkbox" id="checkbox_d1" class="chk_4" /><label for="checkbox_d1"></label>
            <input type="checkbox" id="checkbox_d2" class="chk_4" checked /><label for="checkbox_d2"></label>
        </div>
    </div>
</div>

css部分

.chk_1,.chk_2,.chk_3,.chk_4 {
    display: none;
}
 
/*******STYLE 1*******/
.chk_1 + label {
    background-color: #FFF;
    border: 1px solid #C1CACA;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
    padding: 9px;
    border-radius: 5px;
    display: inline-block;
    position: relative;
    margin-right: 30px;
}
.chk_1 + label:active {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.chk_1:checked + label {
    background-color: #ECF2F7;
    border: 1px solid #92A1AC;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
    color: #243441;
}

.chk_1:checked + label:after {
    content: '\2714';
    position: absolute;
    top: 0px;
    left: 0px;
    color: #758794;
    width: 100%;
    text-align: center;
    font-size: 1.4em;
    padding: 1px 0 0 0;
    vertical-align: text-top;
}


/*******STYLE 2*******/
.chk_2 + label {
    background-color: #F37900;
    padding: 18px 20px 18px 23px;
    box-shadow: inset 0 50px 37px -30px rgba(255, 222, 197, 0.3), 0 0 13px rgba(0, 0, 0, 0.6);
    border-radius: 1000px;
    display: inline-block;
    position: relative;
    border-top: 1px solid #ECA14F;
    margin-right: 30px;
    color: #FFF;
    font-size: 1.7em;
    width: 113px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid #552B09;
}

.chk_2 + label:hover  {
    border-top: 1px solid #FC8C1E;
    background: #FC8C1E;
    box-shadow: inset 0 -50px 37px -30px rgba(255, 222, 197, 0.07), 0 0 13px rgba(0, 0, 0, 0.6);
}

.chk_2 + label:active  {
    border-top: none;
    background: #FC8C1E;
    padding: 19px 20px 18px 23px;
    box-shadow: inset 0 3px 8px rgba(129, 69, 13, 0.3), inset 0 -50px 37px -30px rgba(255, 222, 197, 0.07), 0 0 13px rgba(0, 0, 0, 0.6);    
}

.chk_2 + label:after {
    content: ' ';
    border-radius: 100px;
    width: 32px;
    position: absolute;
    top: 12px;
    right: 12px;
    box-shadow: inset 0px 16px 40px rgba(0, 0, 0, 0.4);
    height: 32px;
}

.chk_2 + label:before {
    content: ' ';
    border-radius: 100px;
    width: 20px;
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 999;
    box-shadow: inset 0px 16px 40px #FFF;
    height: 20px;
    display: none;
}

.chk_2:checked + label:before {
    display: block;
}

/*******STYLE 3*******/

.chk_3 + label {
    background-color: #fafbfa;
    padding: 9px;
    border-radius: 50px;
    display: inline-block;
    position: relative;
    margin-right: 30px;
    -webkit-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in;
    width: 40px;
    height: 15px;
}

.chk_3  + label:after {
    content: ' ';
    position: absolute;
    top: 0;
    -webkit-transition: box-shadow 0.1s ease-in;
    transition: box-shadow 0.1s ease-in;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 100px;
    box-shadow: inset 0 0 0 0 #eee, 0 0 1px rgba(0,0,0,0.4);
}

.chk_3  + label:before {
    content: ' ';
    position: absolute;
    background: white;
    top: 1px;
    left: 1px;
    z-index: 999999;
    width: 31px;
    -webkit-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in;
    height: 31px;
    border-radius: 100px;
    box-shadow: 0 3px 1px rgba(0,0,0,0.05), 0 0px 1px rgba(0,0,0,0.3);
}

.chk_3:active + label:after {
    box-shadow: inset 0 0 0 20px #eee, 0 0 1px #eee;
}

.chk_3:active + label:before {
    width: 37px;
}

.chk_3:checked:active + label:before {
    width: 37px;
    left: 20px;
}

.chk_3  + label:active {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.chk_3:checked + label:before {
    content: ' ';
    position: absolute;
    left: 26px;
    border-radius: 100px;
}

.chk_3:checked + label:after {
    content: ' ';
    font-size: 1.5em;
    position: absolute;
    background: #4cda60;
    box-shadow: 0 0 1px #4cda60;
}


/*******STYLE 4*******/
.chk_4 + label {
    background-color: #FFF;
    padding: 11px 9px;
    border-radius: 7px;
    display: inline-block;
    position: relative;
    margin-right: 30px;
    background: #F7836D;
    width: 58px;
    height: 10px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1), 0 0 10px rgba(245, 146, 146, 0.4);
}

.chk_4 + label:before {
    content: ' ';
    position: absolute;
    background: #FFF;
    top: 0px;
    z-index: 99999;
    left: 0px;
    width: 24px;
    color: #FFF;
    height: 32px;
    border-radius: 7px;
    box-shadow: 0 0 1px rgba(0,0,0,0.6);
}

.chk_4 + label:after {
    content: '关闭';  
    position: absolute;
    top: 7px;
    left: 37px;
    font-size: 1.2em;
    color: white;
    font-weight: bold;
    left: 8px;
    padding: 5px;
    top: 4px;
    border-radius: 100px;
}

.chk_4:checked + label {
    background: #67A5DF;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1), 0 0 10px rgba(146, 196, 245, 0.4);
}

.chk_4:checked + label:after {
    content: '开启';
    left: 10px;
}

.chk_4:checked + label:before {
    content: ' ';
    position: absolute;
    z-index: 99999;
    left: 52px;
}


.chk_4 + label:after {
    left: 35px; 
}   

#checkbox_d2 + label:after, #checkbox_d2 + label:before, #checkbox label {  
    -webkit-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in;
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1赞 92
  • Github_web_1
    一:在制作一个Web应用或Web站点的过程中，你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,212评论 0赞 1
  • Bootstrap（基础一）
    Bootstrap是什么？ 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 10,925评论 3赞 184
  • 平时遇到的错误
    Compilation failed; see the compiler error output for det...
    敲代码的小新阅读 1,540评论 0赞 0
  • 早起群9月第四周总结（9.18-9.24）
    这周早上起的愈加晚了，又出现了打卡晚的情况，没坚持到最后，阵亡了。虽然存在客观原因，但是打卡群已经给了自己两次免死...
    狐狸王阅读 440评论 0赞 50