CSS3美化表单控件全集


Posted in HTML / CSS onJune 29, 2016

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

 

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.     width300px;   
  3.     height40px;   
  4.     font-size14px;   
  5.     background-color:#fff;   
  6.     margin-leftauto;   
  7.     margin-rightauto;   
  8.     positionrelative;   
  9. }   
  10. /*下拉箭头的样式*/  
  11. .container .select:after{   
  12.     content"";   
  13.     displayblock;   
  14.     width10px;   
  15.     height10px;   
  16.     positionabsolute;   
  17.     top11px;   
  18.     rightright12px;   
  19.     border-left1px solid #ccc;   
  20.     border-bottom1px 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-height40px;   
  32.     cursorpointer;   
  33. }   
  34. /*  
  35.     下拉列表的样式  
  36.     默认高度为0  
  37. */  
  38. .container .select ul{   
  39.     list-stylenone;   
  40.     background-color#fff;   
  41.     width: 100%;   
  42.     overflow-y: auto;   
  43.     positionabsolute;   
  44.     top40px;   
  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-height40px;   
  53.     cursorpointer;   
  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-height300px;   
  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.     top18px;   
  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.     displayinline-block;   
  4.     positionrelative;   
  5.     width28px;   
  6.     height28px;   
  7.     border1px solid #cccccc;   
  8.     background-color#fff;   
  9.     border-radius: 28px;   
  10.     cursorpointer;   
  11.     margin-right:10px;   
  12. }   
  13.   
  14. input[type="radio"]{   
  15.     displaynone;   
  16. }   
  17. .radio-block label:after{   
  18.     content'';   
  19.     displayblock;   
  20.     positionabsolute;   
  21.     width20px;   
  22.     height20px;   
  23.     left4px;   
  24.     top4px;   
  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.   

最后效果:

CSS3美化表单控件全集

三.美化复选框

CSS3美化表单控件全集

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

CSS Code复制内容到剪贴板
  1. .switch-block{   
  2.     width980px;   
  3.     padding: 3% 0;   
  4.     margin: 0 auto;   
  5.     text-aligncenter;   
  6.     background-color#fc9;   
  7. }   
  8. .switch-block label{   
  9.     displayinline-block;   
  10.     width62px;   
  11.     height30px;   
  12.     background-color:#fafafa;   
  13.     border:1px solid #eee;   
  14.     border-radius: 16px;   
  15.     positionrelative;   
  16.     margin-right10px;   
  17.     cursorpointer;   
  18.     -webkit-transition: background .2s ease-in;   
  19.     transition :background .2s ease-in;   
  20. }   
  21. input[type="checkbox"]{   
  22.     displaynone;   
  23. }   
  24. .switch-block label:after{   
  25.     content'';   
  26.     positionabsolute;   
  27.     width28px;   
  28.     height28px;   
  29.     border1px solid #eee;   
  30.     border-radius: 14px;   
  31.     left1px;   
  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.     left32px;   
  43.     -webkit-transition: left .2s ease-in;   
  44.     transition: left .2s ease-in;   
  45. }   

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3教程(9):设置RGB颜色
Apr 02 HTML / CSS
利用CSS3的transform做的动态时钟效果
Sep 21 HTML / CSS
css3简单练习实现遨游浏览器logo的绘制
Jan 30 HTML / CSS
CSS3属性box-sizing使用指南
Dec 09 HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
Aug 10 HTML / CSS
html5 canvas实现跟随鼠标旋转的箭头
Mar 11 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 HTML / CSS
html5时钟实现代码
Oct 22 HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
Dec 15 HTML / CSS
HTML5+css3:3D旋转木马效果相册
Jan 03 HTML / CSS
canvas简易绘图的实现(海绵宝宝篇)
Jul 04 HTML / CSS
CSS3+DIV实现漂亮的动画彩色标签
Jun 16 #HTML / CSS
超酷炫 CSS3垂直手风琴菜单
Jun 28 #HTML / CSS
CSS3中的注音对齐属性ruby-align用法指南
Jul 01 #HTML / CSS
CSS3中Transform动画属性用法详解
Jul 04 #HTML / CSS
CSS3 渐变(Gradients)之CSS3 线性渐变
Jul 08 #HTML / CSS
CSS3 渐变(Gradients)之CSS3 径向渐变
Jul 08 #HTML / CSS
CSS3弹性伸缩布局之box布局
Jul 12 #HTML / CSS
You might like
随时给自己贴的图片加文字的php代码
2007/03/08 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
php集成动态口令认证
2016/07/21 PHP
PHP自定义函数实现格式化秒的方法
2016/09/14 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
javawscript 三级菜单的实现原理
2009/07/01 Javascript
javascript 操作文件 实现方法小结
2009/07/02 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
jQuery简单实现日历的方法
2015/05/04 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
2015/08/07 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
谈一谈JS消息机制和事件机制的理解
2016/04/14 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
package.json配置文件构成详解
2019/08/27 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
原生js实现分页效果
2020/09/23 Javascript
跟老齐学Python之折腾一下目录
2014/10/24 Python
使用python为mysql实现restful接口
2018/01/05 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
面试后感谢信怎么写
2014/02/01 职场文书
大学军训感言300字
2014/03/09 职场文书
爱祖国演讲稿
2014/05/04 职场文书
工程造价专业求职信
2014/07/17 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
终止劳动合同通知书
2015/04/16 职场文书
2015年科研工作总结范文
2015/05/13 职场文书
2015年库房管理工作总结
2015/10/14 职场文书
《乙女游戏世界对路人角色很不友好》OP主题曲无字幕动画MV公开
2022/04/05 日漫
css清除浮动clearfix:after的用法详解(附完整代码)
2023/05/21 HTML / CSS