纯CSS修改checkbox复选框样式

时间：2019-02-01 22:30:56 阅读：296 评论：0 收藏：0 [点我收藏+]

标签：inpu transform tail 复选框 one 透明度纯css col bsp

借鉴网友博客, 改用后整理收录

效果图:

技术分享图片

移入:

技术分享图片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box_inner1{
                width: 25px;
                margin: 20px 100px;        /*最外层盒子的外边距, 可自己调*/
                position: relative;
            }
            
            .box_inner1 label{
                cursor: pointer;
                position: absolute;
                width: 25px;        /*此处width和height是选框显示出来的大小*/
                height: 25px;
                top:0;                /*此处top和left是选框显示出来位置, 可根据需求进行调节*/
                left: 0;
                background: #e75213;        /*此处是复选框背景颜色, 下面是边框颜色, 设置一致是保持统一*/
                border: 1px solid #E75213;
            }
            
            .box_inner1 label:after{
                opacity: 1;        /*选中后样式的透明度, 1是不透明*/
                content: ‘‘;    /*选中后的内容 ,此处为空是指把默认的去掉, 下面自定义*/
                position: absolute;
                width: 9px;    
                height: 5px;
                background: transparent;    /*这一块是核心,可以自己调试看效果*/
                top: 6px;
                left: 7px;
                border: 3px solid white;
                border-top: none;
                border-right: none;
                
                /*选中的样式是用盒子div加背景色, 加旋转实现的, 下面的代码是旋转45度*/
                -webkit-transform: rotate(-45deg);
                -moz-transform: rotate(-45deg);
                /*-o-transform: rotate(-45deg);*/
                -ms-transform: rotate(-45deg);
                transform: rotate(-45deg);
                
            }
            
            .box_inner1 label:hover::after{
                opacity: 0.5;        /*鼠标移入移出的透明度*/
            }
            
            .box_inner1 input[type=checkbox]:checked + label:after{
                opacity: 0;        /*取消选中*/
            }
            
            /*要有多个选框, 直接复制一份重命名, 避免冲突*/
            /*第二个*/
            .box_inner2{
                width: 25px;
                margin: 20px 100px;
                position: relative;
            }
            
            .box_inner2 label{
                cursor: pointer;
                position: absolute;
                width: 25px;
                height: 25px;
                top:0;        
                left: 0;    
                background: #e75213;
                border: 1px solid #E75213;
            }
            
            .box_inner2 label:after{
                opacity: 1;
                content: ‘‘;
                position: absolute;
                width: 9px;
                height: 5px;
                background: transparent;
                top: 6px;
                left: 7px;
                border: 3px solid white;
                border-top: none;
                border-right: none;
                
                -webkit-transform: rotate(-45deg);
                -moz-transform: rotate(-45deg);
                /*-o-transform: rotate(-45deg);*/
                -ms-transform: rotate(-45deg);
                transform: rotate(-45deg);
                
            }
            
            .box_inner2 label:hover::after{
                opacity: 0.5;
            }
            
            .box_inner2 input[type=checkbox]:checked + label:after{
                opacity: 0;
            }
            
            input[type=checkbox]{
                visibility: hidden;
            }
            
            
        </style>
    </head>
    <body>
        <div class="box_inner1">
            <input type="checkbox" id="box_innerInput1" />
            <label for="box_innerInput1"></label>        
        </div>
        
        <div class="box_inner2">
            <input type="checkbox" id="box_innerInput2" />
            <label for="box_innerInput2"></label>        
        </div>
    </body>
</html>

参考:

http://www.360doc.com/content/15/0528/11/1355383_473823407.shtml

https://blog.csdn.net/qq_34182808/article/details/79992465

纯CSS修改checkbox复选框样式

标签：inpu transform tail 复选框 one 透明度纯css col bsp

原文地址：https://www.cnblogs.com/taocc/p/10347112.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行