首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

CSS3美化表单控件全集

所属分类： 网页制作 / CSS 阅读数： 1556
收藏 0 赞 0 分享

表单的默认控件在不同的浏览器中的样式不同，用户体验很差。用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.     display: none;   
  23. }   
  24. .switch-block label:after{   
  25.     content: '';   
  26.     position: absolute;   
  27.     width: 28px;   
  28.     height: 28px;   
  29.     border: 1px solid #eee;   
  30.     border-radius: 14px;   
  31.     left: 1px;   
  32.     background-color:#fff;   
  33.     -webkit-transition: left .2s ease-in;   
  34.     transition: left .2s ease-in;   
  35. }   
  36. .switch-block input[type="checkbox"]:checked + label{   
  37.     background-color:#3c6;   
  38.     -webkit-transition: background .2s ease-in;   
  39.     transition :background .2s ease-in;   
  40. }   
  41. .switch-block input[type="checkbox"]:checked + label:after{   
  42.     left: 32px;   
  43.     -webkit-transition: left .2s ease-in;   
  44.     transition: left .2s ease-in;   
  45. }   

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

更多精彩内容其他人还在看

CSS配合JavaScript做酷的动态页面效果

　　利用CSS配合JavaScript的可以做很多更酷的动态页面效果，在本教程的最后给大家简单介绍一下CSS配合JS的应用。首先，要搞清楚事件和动作的概念。在客户端脚本中，JavaScript 通过对事件进行响应来获得与用户的交互。例如，当用户单击一个按钮或者在某段文字上移动鼠标
收藏 0 赞 0 分享

WEB标准,Web前端开发工程师必备技术列表

　　想要打造并拥有一流的Web产品开发团队，在团队成员基础能力上一定要下功夫。对于Web前端产品开发来说，仅仅掌握Web1.0时代简单的"网页套接"是完全不够的。我结合自己的团队配备，特此罗列了Web前端产品工程师所涉及的技能列表如下： 　　通过许多实际项目，
收藏 0 赞 0 分享

用CSS制作Alpha滤镜测试板

alpha滤镜给制作网页特效提供了较大的创作空间，但由于它控制参数较多，在实际应用时，为了确定一组合适的参数值，不得不反复调整修改，在编辑窗口和预览窗口来回倒腾，甚是麻烦，本文介绍了一种简单的方法。制作一个“Alpha滤镜参数测试板”，在测试板上输入参数
收藏 0 赞 0 分享

非常流行的所谓的气泡窗口

普通的Alt无法自定义风格,而Sweet Titles通过JS脚本与CSS的集合.自定义了这种伪Alt风格. 前一段时间非常流行的,就所谓的气泡窗口(鼠标移到链接处出现的). 我们这里实现的用的是Sweet Titles的插件.显示效果完全由CSS控制.. 先下载Sweet Ti
收藏 0 赞 0 分享

CSS教程：li和ul标签用法举例

LI代码的格式化: A).运用CSS格式化列表符： ul li{ list-style-type:none; } B).如果你想将列表符换成图像，则： ul li{ list-style-type:none; list-style-image: url(/blog/images/
收藏 0 赞 0 分享

CSS教程:CSS中的定位（position）

　　使用CSS来定位页面内层的位置，一直是比较难以掌握的事情，很多时候，往往被绝对定位的元素，总是以浏览器的左上角为坐标原点，此时，如果浏览器的大小改变，被定义的层就会偏离设计想要的位置，让人很挠头。 　　其实，要想控制好层的绝对定位，只要理解CSS中关于定位
收藏 0 赞 0 分享

CSS教程:盒模型(BOX Model)

　　如果想熟练掌握DIV和CSS的布局方法，首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin），如图1所示。
收藏 0 赞 0 分享

无延迟翻滚的图形与CSS混合风格按钮

　　在一个具有图形背景的按钮中添加CSS风格的文本，这种建立按钮的方法结合了具有CSS翻滚(CSS rollover)标记的开发速度和效率，从而有效地提高按钮外表图像的三维效果。 　　相比于常规的图形按钮，这些图形/CSS混合按钮可易于建立和载入，因为你只需要为空白按钮外面
收藏 0 赞 0 分享

css里expression实现界面对象的批量控制

用过css样式我们就知道, 可以定义一批对象的class属性来指定同一个样式来统一界面. 但如何统一同类型的对象的事件? 比如:界面有无数个 <img src="**.jpg"> 如何实现鼠标经过此图片, 图片的src变成是**_over.jpg?
收藏 0 赞 0 分享

CSS教程:水平对齐(text-align)

　　水平对齐（text-align），用以设定元素内文本的水平对齐方式。 　　1.语法 　　text-align具体参数如下： 语法：text-align:left|right|center|justify 说明：设定元素内文本的水平对齐方式。 参数：left:左
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 www.zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22