CSS3美化表单控件全集

互联网
六月下雨了，天又下了雨。我已经很久没有见过如此下雨了，柔软而缠绵，就像你的眼睛，轻轻地刷着我寂寞的肩膀。闻一闻书本，站在窗前，对朋友说：早上好！

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

一.下拉控件

效果图：

下拉控件的布局结构：

XML/HTML Code复制内容到剪贴板
  1. <divclass="container">
  2. <divclass="select">
  3. <p>所有选项</p>
  4. <ul>
  5. <liclass="selected"data-value="所有选项">所有选项</li>
  6. <lidata-value="Python">Python</li>
  7. <lidata-value="Javascript">Javascript</li>
  8. <lidata-value="Java">Java</li>
  9. <lidata-value="Ruby">Ruby</li>
  10. </ul>
  11. </div>
  12. </div>

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:1pxsolid#ccc;
  20. border-bottom:1pxsolid#ccc;
  21. -webkit-transform:rotate(-45deg);
  22. transform:rotate(-45deg);
  23. -webkit-transition:transform.2sease-in,top.2sease-in;
  24. transition:transform.2sease-in,top.2sease-in;
  25. }
  26. /*
  27. 被选中的列表项显示的区域
  28. */
  29. .container.selectp{
  30. padding:015px;
  31. line-height:40px;
  32. cursor:pointer;
  33. }
  34. /*
  35. 下拉列表的样式
  36. 默认高度为0
  37. */
  38. .container.selectul{
  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.3sease-in;
  48. transition:max-height.3sease-in;
  49. }
  50. .container.selectulli{
  51. padding:015px;
  52. line-height:40px;
  53. cursor:pointer;
  54. }
  56. .container.selectulli:hover{
  57. background-color:#e0e0e0;
  58. }
  59. .container.selectulli.selected{
  60. background-color:#39f;
  61. color:#fff;
  63. }
  64. /*下拉控件动画*/
  65. @-webkit-keyframesslide-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. @keyframesslide-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.onul{
  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.5sease-in;
  118. animation:slide-down.5sease-in;
  119. }
  120. /*下拉选项被选中后控制箭头的方向*/
  121. .container.select.on:after{
  122. -webkit-transform:rotate(-225deg);
  123. transform:rotate(-225deg);
  124. top:18px;
  125. }

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

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

二.美化单选框

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

CSS Code复制内容到剪贴板
  1. /*用过label标签来模拟radio的样式*/
  2. .radio-blocklabel{
  3. display:inline-block;
  4. position:relative;
  5. width:28px;
  6. height:28px;
  7. border:1pxsolid#cccccc;
  8. background-color:#fff;
  9. border-radius:28px;
  10. cursor:pointer;
  11. margin-right:10px;
  12. }
  14. input[type="radio"]{
  15. display:none;
  16. }
  17. .radio-blocklabel: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.3sease-in;
  35. transition:background-color.3sease-in;
  36. }
  37. /*选中之后的样式*/
  38. input[type="radio"]:checked+label:after{
  39. -webkit-transform:scale(1);
  40. transform:scale(1);
  41. -webkit-transition:transform.2sease-in;
  42. transition:transform.2sease-in;
  43. }

最后效果：

三.美化复选框

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

CSS Code复制内容到剪贴板
  1. .switch-block{
  2. width:980px;
  3. padding:3%0;
  4. margin:0auto;
  5. text-align:center;
  6. background-color:#fc9;
  7. }
  8. .switch-blocklabel{
  9. display:inline-block;
  10. width:62px;
  11. height:30px;
  12. background-color:#fafafa;
  13. border:1pxsolid#eee;
  14. border-radius:16px;
  15. position:relative;
  16. margin-right:10px;
  17. cursor:pointer;
  18. -webkit-transition:background.2sease-in;
  19. transition:background.2sease-in;
  20. }
  21. input[type="checkbox"]{
  22. display:none;
  23. }
  24. .switch-blocklabel:after{
  25. content:'';
  26. position:absolute;
  27. width:28px;
  28. height:28px;
  29. border:1pxsolid#eee;
  30. border-radius:14px;
  31. left:1px;
  32. background-color:#fff;
  33. -webkit-transition:left.2sease-in;
  34. transition:left.2sease-in;
  35. }
  36. .switch-blockinput[type="checkbox"]:checked+label{
  37. background-color:#3c6;
  38. -webkit-transition:background.2sease-in;
  39. transition:background.2sease-in;
  40. }
  41. .switch-blockinput[type="checkbox"]:checked+label:after{
  42. left:32px;
  43. -webkit-transition:left.2sease-in;
  44. transition:left.2sease-in;
  45. }

本文链接：http://www.cnblogs.com/maple0x/p/5624401.html

以上就是CSS3美化表单控件全集。自私的人会为自己的行为做任何辩护，其中最常见的一种借口就是“我是为你好”。更多关于CSS3美化表单控件全集请关注haodaima.com其它相关文章！