CSS3美化表单控件全集

前端  /  管理员 发布于 7年前   167

表单的默认控件在不同的浏览器中的样式不同，用户体验很差。用CSS3可以实现表单控件的美化，可以提供更好的用户体验。不足之处就是浏览器的兼容性问题。
 
一.下拉控件
 
效果图：

 

下拉控件的布局结构：

XML/HTML Code复制内容到剪贴板

1. <div class="container">  
2.         <div class="select">  
3.             <p>所有选项</p>  
4.             <ul>  
5.                 <li class="selected" data-value="所有选项">所有选项</li>  
6.                 <li data-value="Python">Python</li>  
7.                 <li data-value="Javascript">Javascript</li>  
8.                 <li data-value="Java">Java</li>  
9.                 <li data-value="Ruby">Ruby</li>  
10.             </ul>  
11.         </div>  
12.     </div>    
13.   

ul用来模拟下拉列表，在实际的使用过程中，可以根据后台返回过来的数据动态生成。p元素用来渲染选中的选项。
 
核心样式：

CSS Code复制内容到剪贴板

1. .container .select{   
2.     width: 300px;   
3.     height: 40px;   
4.     font-size: 14px;   
5.     background-color:#fff;   
6.     margin-left: auto;   
7.     margin-right: auto;   
8.     position: relative;   
9. }   
10. /*下拉箭头的样式*/  
11. .container .select:after{   
12.     content: "";   
13.     display: block;   
14.     width: 10px;   
15.     height: 10px;   
16.     position: absolute;   
17.     top: 11px;   
18.     rightright: 12px;   
19.     border-left: 1px solid #ccc;   
20.     border-bottom: 1px solid #ccc;   
21.     -webkit-transform: rotate(-45deg);   
22.     transform: rotate(-45deg);   
23.     -webkit-transition: transform .2s ease-in, top .2s ease-in;   
24.     transition: transform .2s ease-in, top .2s ease-in;   
25. }   
26. /*  
27.     被选中的列表项显示的区域  
28. */  
29. .container .select p{   
30.     padding: 0 15px;   
31.     line-height: 40px;   
32.     cursor: pointer;   
33. }   
34. /*  
35.     下拉列表的样式  
36.     默认高度为0  
37. */  
38. .container .select ul{   
39.     list-style: none;   
40.     background-color: #fff;   
41.     width: 100%;   
42.     overflow-y: auto;   
43.     position: absolute;   
44.     top: 40px;   
45.     left: 0;   
46.     max-height:0;   
47.     -webkit-transition: max-height .3s ease-in;   
48.     transition: max-height .3s ease-in;   
49. }   
50. .container .select ul li{   
51.     padding: 0 15px;   
52.     line-height: 40px;   
53.     cursor: pointer;   
54. }   
55.   
56. .container .select ul li:hover{   
57.     background-color: #e0e0e0;   
58. }   
59. .container .select ul li.selected{   
60.     background-color: #39f;   
61.     color: #fff;   
62.   
63. }   
64. /*下拉控件动画*/  
65. @-webkit-keyframes slide-down{   
66.     0%{   
67.         -webkit-transform: scale(1, 0);   
68.         transform: scale(1, 0);   
69.     }   
70.     25%{   
71.         -webkit-transform: scale(1, 1.2);   
72.         transform: scale(1, 1.2);   
73.     }   
74.     50%{   
75.         -webkit-transform: scale(1, .85);   
76.         transform: scale(1, .85);   
77.     }   
78.     75%{   
79.         -webkit-transform: scale(1, 1.05);   
80.         transform: scale(1, 1.05);   
81.     }   
82.     100%{   
83.         -webkit-transform: scale(1, 1);   
84.         transform: scale(1, 1);   
85.     }   
86. }   
87. @keyframes slide-down{   
88.     0%{   
89.         -webkit-transform: scale(1, 0);   
90.         transform: scale(1, 0);   
91.     }   
92.     25%{   
93.         -webkit-transform: scale(1, 1.2);   
94.         transform: scale(1, 1.2);   
95.     }   
96.     50%{   
97.         -webkit-transform: scale(1, .85);   
98.         transform: scale(1, .85);   
99.     }   
100.     75%{   
101.         -webkit-transform: scale(1, 1.05);   
102.         transform: scale(1, 1.05);   
103.     }   
104.     100%{   
105.         -webkit-transform: scale(1, 1);   
106.         transform: scale(1, 1);   
107.     }   
108. }   
109. .container .select.on ul{   
110.     /*  
111.         默认情况下,ul的高度为0,当点击控控件的时候,  
112.         设置下拉列表的高度。  
113.     */  
114.     max-height: 300px;   
115.     -webkit-transform-origin: 50% 0;   
116.     transform-origin: 50% 0;   
117.     -webkit-animation: slide-down .5s ease-in;   
118.     animation: slide-down .5s ease-in;   
119. }   
120. /*下拉选项被选中后控制箭头的方向*/  
121. .container .select.on:after{   
122.     -webkit-transform: rotate(-225deg);   
123.     transform: rotate(-225deg);   
124.     top: 18px;   
125. }    
126.   

这里只是静态的样式，如果要实现“选择”这个过程，需要用到JavaScript来实现。

JavaScript Code复制内容到剪贴板

1. $(function(){   
2.     var selected  = $('.select > p');   
3.     //控制列表显隐   
4.     selected.on('click', function(event){   
5.         $(this).parent('.select').toggleClass('on');   
6.         event.stopPropagation();   
7.     });   
8.     //点击列表项,将列表项的值添加到p标签中   
9.     $('.select li').on('click', function(event){   
10.         var self = $(this);   
11.         selected.text(self.data('value'));   
12.     });   
13.     //点击文档其他区域隐藏列表   
14.     $(document).on('click', function(){   
15.         $('.select').removeClass('on');   
16.     });   
17. });    
18.   

二.美化单选框
 
lable标签可以通过for属性与单选框实现联动。我们利用这一特性来实现美化单选框，这也是原理所在。还有就是别忘了将真正的单选框(type="radio")隐藏掉。

CSS Code复制内容到剪贴板

1. /*用过label标签来模拟radio 的样式*/  
2. .radio-block label{   
3.     display: inline-block;   
4.     position: relative;   
5.     width: 28px;   
6.     height: 28px;   
7.     border: 1px solid #cccccc;   
8.     background-color: #fff;   
9.     border-radius: 28px;   
10.     cursor: pointer;   
11.     margin-right:10px;   
12. }   
13.   
14. input[type="radio"]{   
15.     display: none;   
16. }   
17. .radio-block label:after{   
18.     content: '';   
19.     display: block;   
20.     position: absolute;   
21.     width: 20px;   
22.     height: 20px;   
23.     left: 4px;   
24.     top: 4px;   
25.     background-color: #28bd12;   
26.     border-radius: 20px;   
27.     /*通过scale属性来控制中心点*/  
28.     -webkit-transform: scale(0);   
29.     transform: scale(0);   
30. }   
31. /*选中样式*/  
32. input[type="radio"]:checked + label{   
33.     background-color :#eee;   
34.     -webkit-transition: background-color .3s ease-in;   
35.     transition: background-color .3s ease-in;   
36. }   
37. /*选中之后的样式*/  
38. input[type="radio"]:checked + label:after{   
39.     -webkit-transform: scale(1);   
40.     transform: scale(1);   
41.     -webkit-transition: transform .2s ease-in;   
42.     transition: transform .2s ease-in;   
43. }    
44.   

最后效果：

三.美化复选框

原理和单选框的制作方式类似。在checked的时候该表圆形的left值和label的背景。

CSS Code复制内容到剪贴板

1. .switch-block{   
2.     width: 980px;   
3.     padding: 3% 0;   
4.     margin: 0 auto;   
5.     text-align: center;   
6.     background-color: #fc9;   
7. }   
8. .switch-block label{   
9.     display: inline-block;   
10.     width: 62px;   
11.     height: 30px;   
12.     background-color:#fafafa;   
13.     border:1px solid #eee;   
14.     border-radius: 16px;   
15.     position: relative;   
16.     margin-right: 10px;   
17.     cursor: pointer;   
18.     -webkit-transition: background .2s ease-in;   
19.     transition :background .2s ease-in;   
20. }   
21. input[type="checkbox"]{   
22.     <