CSS学习笔记三：自定义单选框，复选框，开关

一点一点学习CCS，这次学习了如何自定义单选框，复选框以及开关。

一、单选框

1、先写好body里面的样式，先写几个框

 <body>
     <div class="radio-1">
         <input type="radio" name="radio-1" id="radio-1-1">
         <label for="radio-1-1"></label>

         <input type="radio" name="radio-1" id="radio-1-2">
         <label for="radio-1-2"></label>

         <input type="radio" name="radio-1" id="radio-1-3">
         <label for="radio-1-3"></label>

     </div>
 </body>

用input写好radio在旁边显示，这个label中的for 属性的值与控件 id 是一样的效果。这里在下面将label的样式如同按钮的样式编写

 <style type="text/css">
         .radio-1{
             width: 980px;
             margin: 0 auto;
             padding: 3% 0;
             text-align: center;
             font-size: 28px;
         }

         .radio-1 [type="radio"]{
             display: none;

         }
         .radio-1 label{
             display: inline-block;
             position: relative;
             width: 60px;
             height: 60px;
             border:1px solid #ccc;
             background-color: #fff;
             margin-right: 10px;
             cursor: pointer;
             border-radius: 100%
         }
         .radio-1 label:after{
             content: '';
             position: absolute;;
             top: 10px;
             left: 10px;
             width: 40px;
             height: 40px;
             background-color: #81C2D6;
             border-radius: 50%;
             transform: scale(0);
             /*transition: transfrom .2s ease-out;*/
         }
         .radio-1 [type="radio"]:checked + label{
             background-color: #eee;
             /*transition: background-color .2s  ease-in;*/
         }
         .radio-1 [type="radio"]:checked + label:after{
             transform: scale(1);
             /*transition: transfrom .2s ease-in;*/
         }
     </style>

.radio-1 [type="radio"]{
display: none;} 这个样式是把由该选择器中包含的radio都不让其显示，差不多就是隐藏的意思；

打开有惊喜

二、复选框

 .checkbox-1{
             width: 980px;
             margin:0 auto;
             text-align:center;
             padding: 3% 0;
             background-color:#9cc;
         }
         .checkbox-1 [type="checkbox"]{
             display: none;

         }
         .checkbox-1 label{
             display: inline-block;
             width: 10px;
             height: 10px;
             padding: 9px;
             border:1px #ccc solid;
             background-color: #fff;
             color: #333;
             margin-right: 10px;
             overflow: hidden ;
             position: relative;
             cursor: pointer;
         }
         .checkbox-1 label:after{
             content: 'A';
             font-family: Arial;
             color: #fff;
             background-color: #999;
             width: 26px;
             height: 26px;
             line-height: 26px;
             position: absolute;;
             left: 1px;
             top: 1px;
             border-radius: 4px;
             text-align: center;
             transform: translateY(-30px);
             transition: transform .2s ease-out;

         }
         .checkbox-1 [type="checkbox"]:checked +label:after{
             transform: translateY(0);
             transition: transform .2s ease-in;
         }

第一个基本样式是设置整体背景，第二样式是将input隐藏掉，只显示出写的label。因为for 属性相当与id属性所以label 所对应的也是input的输入值，在label样式，设置其display为内嵌式，同时设置其长宽，背景颜色以及长宽，当你点击按钮的时候的checked则将after的内容改变位置，本身在label中就设置了超过label设置的长宽的东西都会被隐藏，而一开始after中的东西拜访的位置就往上移动一定距离，当点击后，则修改样式中的translate，即改变其位移，回到原来的位置。

 <div class="checkbox-1">
         <input type="checkbox" checked="checked" name="checkbox-1" id="checkbox-1-1">
         <label for="checkbox-1-1"></label>

         <input type="checkbox" name="checkbox-1" id="checkbox-1-2">
         <label for="checkbox-1-2"></label>

         <input type="checkbox" name="checkbox-1" id="checkbox-1-3">
         <label for="checkbox-1-3"></label>

     </div>

三、开关

 .checkbox-2 [type="checkbox"]{
             display: none;
         }
         .checkbox-2{
             width: 980px;
             margin:0 auto;
             text-align:center;
             padding: 3% 0;
             background-color:#fc9;
         }
         .checkbox-2 label{
             display: inline-block;
             width: 68px;
             height:34px;
             border:1px solid #eee;
             border-radius: 18px;
             background-color: #fafafa;
             margin-right: 10px;
             cursor: pointer;
             position: relative;
             transition: background-color .1s ease-in;
         }
         .checkbox-2 label:after{
             content: '';
             position: absolute;
             left: 1px;
             top:1px;
             width: 30px;
             height: 30px;
             border:1px solid #eee;
             border-radius: 50%;
             background-color: #fff;
             transition: left .1s ease-out;
         }
         .checkbox-2 [type="checkbox"]:checked +label{
             background-color: #3c6;
             transition: background-color .1s ease-in;

         }
         .checkbox-2 [type="checkbox"]:checked +label:after{
             left: 35px;
             transition: left .1s ease-out;

         }

在label 中先把背景设置好，基础的背景，一个椭圆，在after中设置一个小圆圈，设置好背景颜色，在点击该开关后，将该小圆圈向左移动，同时将该背景颜色更改为绿色。

 <div class="checkbox-2">
         <input type="checkbox" checked="checked" name="checkbox-1" id="checkbox-2-1">
         <label for="checkbox-2-1"></label>

         <input type="checkbox" name="checkbox-1" id="checkbox-2-2">
         <label for="checkbox-2-2"></label>

         <input type="checkbox" name="checkbox-2" id="checkbox-2-3">
         <label for="checkbox-2-3"></label>

     </div>

打开有惊喜