CSS学习笔记三:自定义单选框,复选框,开关

技术分享打开有惊喜

二、复选框

 1 .checkbox-1{
 2             width: 980px;
 3             margin:0 auto;
 4             text-align:center;
 5             padding: 3% 0;
 6             background-color:#9cc;
 7         }
 8         .checkbox-1 [type="checkbox"]{
 9             display: none;
10 
11         }
12         .checkbox-1 label{
13             display: inline-block;
14             width: 10px;
15             height: 10px;
16             padding: 9px;
17             border:1px #ccc solid;
18             background-color: #fff;
19             color: #333;
20             margin-right: 10px;
21             overflow: hidden ;
22             position: relative;
23             cursor: pointer;
24         }
25         .checkbox-1 label:after{
26             content: ‘A‘;
27             font-family: Arial;
28             color: #fff;
29             background-color: #999;
30             width: 26px;
31             height: 26px;
32             line-height: 26px;
33             position: absolute;;
34             left: 1px;
35             top: 1px;
36             border-radius: 4px;
37             text-align: center;
38             transform: translateY(-30px);
39             transition: transform .2s ease-out;
40 
41         }
42         .checkbox-1 [type="checkbox"]:checked +label:after{
43             transform: translateY(0);
44             transition: transform .2s ease-in;
45         }

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

 1 div class="checkbox-1"
 2         input type="checkbox" checked="checked" name="checkbox-1" id="checkbox-1-1"
 3         label for="checkbox-1-1"/label
 4         
 5         input type="checkbox" name="checkbox-1" id="checkbox-1-2"
 6         label for="checkbox-1-2"/label
 7 
 8         input type="checkbox" name="checkbox-1" id="checkbox-1-3"
 9         label for="checkbox-1-3"/label
10         
11     /div

技术分享

三、开关

 1 .checkbox-2 [type="checkbox"]{
 2             display: none;
 3         }
 4         .checkbox-2{
 5             width: 980px;
 6             margin:0 auto;
 7             text-align:center;
 8             padding: 3% 0;
 9             background-color:#fc9;
10         }
11         .checkbox-2 label{
12             display: inline-block;
13             width: 68px;
14             height:34px;
15             border:1px solid #eee;
16             border-radius: 18px;
17             background-color: #fafafa;
18             margin-right: 10px;
19             cursor: pointer;
20             position: relative;
21             transition: background-color .1s ease-in;
22         }
23         .checkbox-2 label:after{
24             content: ‘‘;
25             position: absolute;
26             left: 1px;
27             top:1px;
28             width: 30px;
29             height: 30px;
30             border:1px solid #eee;
31             border-radius: 50%;
32             background-color: #fff;
33             transition: left .1s ease-out;
34         }
35         .checkbox-2 [type="checkbox"]:checked +label{
36             background-color: #3c6;
37             transition: background-color .1s ease-in;
38 
39         }
40         .checkbox-2 [type="checkbox"]:checked +label:after{
41             left: 35px;
42             transition: left .1s ease-out;
43 
44         }

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

 1 div class="checkbox-2"
 2         input type="checkbox" checked="checked" name="checkbox-1" id="checkbox-2-1"
 3         label for="checkbox-2-1"/label
 4         
 5         input type="checkbox" name="checkbox-1" id="checkbox-2-2"
 6         label for="checkbox-2-2"/label
 7 
 8         input type="checkbox" name="checkbox-2" id="checkbox-2-3"
 9         label for="checkbox-2-3"/label
10         
11     /div

技术分享

技术分享打开有惊喜

CSS学习笔记三:自定义单选框,复选框,开关

原文地址:http://www.cnblogs.com/skylarzhan/p/7253063.html


最新回复(0)
/jishuTcp_2BwwFGALKfWxTLKVluvMZKxROTvtl1g0cgKACNNnU_3D4719401
8 简首页