css3 复选框样式

来源：互联网发布：知微科技有限公司编辑：程序博客网时间：2024/05/14 22:01
    <style>        body,input,label{            margin: 0;            padding: 0;        }        /*第一个复选框样式*/        .checkbox1{            width: 980px;            margin: 0 auto;            background-color: burlywood;            text-align: center;            padding: 3% 0;        }        .checkbox1 label{            display: inline-block;            width: 10px;            height: 10px;            padding: 9px;            background-color: #fff;            border: 1px solid #fff;            border-radius: 4px;            margin-right: 10px;            cursor: pointer;            overflow: hidden;            position: relative;        }        .checkbox1 label:after{            content: 'X';            background-color: cadetblue;            color: #ffffff;            width: 26px;            height: 26px;            position: absolute;            left: 1px;            top: 1px;            line-height: 26px;            border-radius: 4px;            text-align: center;            transform:translateY(-30px);            transition:transform .2s ease-out;        }        .checkbox1 [type="checkbox"]:checked + label:after{            transform:translateY(0px);            transition:transform .2s ease-in;        }        .checkbox1 input{            display: none;        }        /*第二个复选框样式*/       .checkbox2{           width: 980px;           background-color: coral;           padding: 3% 0;           text-align: center;            margin: 0 auto;       }        .checkbox2 label{            display: inline-block;            width: 68px;            height: 34px;            border: 1px solid #fff;            margin-right: 10px;            position: relative;            background-color: #ffffff;            border-radius: 18px;            overflow: hidden;            cursor: pointer;            position: relative;            transition:left .1s ease-in;            transition:background-color .1s ease-in;        }        .checkbox2 label:after{            content:'';            width:30px ;            height: 30px;            left:1px ;            top:1px ;            position: absolute;            border: 1px solid antiquewhite;            border-radius: 15px;            transition:left .1s ease-out;        }        .checkbox2 [type="checkbox"]:checked + label{            background-color: #999;            transition:background-color .1s ease-in;        }        .checkbox2 [type="checkbox"]:checked + label:after{            left: 35px;            transition:left .1s ease-in;        }        .checkbox2 input{            display: none;        }    </style><pre name="code" class="html"><div class="checkbox1">    <input type="checkbox" name="checkbox-1" checked="checked"  id="checkbox1-1"/>    <label for="checkbox1-1"></label>    <input type="checkbox" name="checkbox-2" id="checkbox1-2"/>    <label for="checkbox1-2"></label>    <input type="checkbox" name="checkbox-3" id="checkbox1-3"/>    <label for="checkbox1-3"></label></div><div class="checkbox2">    <input type="checkbox" name="checkbox-1" checked="checked" id="checkbox2-1">    <label for="checkbox2-1"></label>    <input type="checkbox" name="checkbox-1"  id="checkbox2-2">    <label for="checkbox2-2"></label>    <input type="checkbox" name="checkbox-1"  id="checkbox2-3">    <label for="checkbox2-3"></label></div>
0 0