这篇文章主要为大家详细介绍了css3美化表单控件的技巧，美化下拉控件、单选框、复选框，感兴趣的小伙伴们可以参考一下
表单的默认控件在不同的浏览器中的样式不同，用户体验很差。用CSS3可以实现表单控件的美化，可以提供更好的用户体验。不足之处就是浏览器的兼容性问题。
一.下拉控件
效果图：
下拉控件的布局结构：
立即学习“前端免费学习笔记（深入）”；
所有选项
- 所有选项
- Python
- Javascript
- Java
- Ruby
ul用来模拟下拉列表，在实际的使用过程中，可以根据后台返回过来的数据动态生成。p元素用来渲染选中的选项。
核心样式：
.container .select{ width: 300px; height: 40px; font-size: 14px; background-color:#fff; margin-left: auto; margin-right: auto; position: relative; } /*下拉箭头的样式*/ .container .select:after{ content: ""; display: block; width: 10px; height: 10px; position: absolute; top: 11px; rightright: 12px; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: transform .2s ease-in, top .2s ease-in; transition: transform .2s ease-in, top .2s ease-in; } /* 被选中的列表项显示的区域 */ .container .select p{ padding: 0 15px; line-height: 40px; cursor: pointer; } /* 下拉列表的样式 默认高度为0 */ .container .select ul{ list-style: none; background-color: #fff; width: 100%; overflow-y: auto; position: absolute; top: 40px; left: 0; max-height:0; -webkit-transition: max-height .3s ease-in; transition: max-height .3s ease-in; } .container .select ul li{ padding: 0 15px; line-height: 40px; cursor: pointer; } .container .select ul li:hover{ background-color: #e0e0e0; } .container .select ul li.selected{ background-color: #39f; color: #fff; } /*下拉控件动画*/ @-webkit-keyframes slide-down{ 0%{ -webkit-transform: scale(1, 0); transform: scale(1, 0); } 25%{ -webkit-transform: scale(1, 1.2); transform: scale(1, 1.2); } 50%{ -webkit-transform: scale(1, .85); transform: scale(1, .85); } 75%{ -webkit-transform: scale(1, 1.05); transform: scale(1, 1.05); } 100%{ -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @keyframes slide-down{ 0%{ -webkit-transform: scale(1, 0); transform: scale(1, 0); } 25%{ -webkit-transform: scale(1, 1.2); transform: scale(1, 1.2); } 50%{ -webkit-transform: scale(1, .85); transform: scale(1, .85); } 75%{ -webkit-transform: scale(1, 1.05); transform: scale(1, 1.05); } 100%{ -webkit-transform: scale(1, 1); transform: scale(1, 1); } } .container .select.on ul{ /* 默认情况下,ul的高度为0,当点击控控件的时候, 设置下拉列表的高度。 */ max-height: 300px; -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-animation: slide-down .5s ease-in; animation: slide-down .5s ease-in; } /*下拉选项被选中后控制箭头的方向*/ .container .select.on:after{ -webkit-transform: rotate(-225deg); transform: rotate(-225deg); top: 18px; }
这里只是静态的样式，如果要实现“选择”这个过程，需要用到JavaScript来实现。
$(function(){ var selected = $('.select > p'); //控制列表显隐 selected.on('click', function(event){ $(this).parent('.select').toggleClass('on'); event.stopPropagation(); }); //点击列表项,将列表项的值添加到p标签中 $('.select li').on('click', function(event){ var self = $(this); selected.text(self.data('value')); }); //点击文档其他区域隐藏列表 $(document).on('click', function(){ $('.select').removeClass('on'); }); });
二.美化单选框
lable标签可以通过for属性与单选框实现联动。我们利用这一特性来实现美化单选框，这也是原理所在。还有就是别忘了将真正的单选框(type=”radio”)隐藏掉。
/*用过label标签来模拟radio 的样式*/ .radio-block label{ display: inline-block; position: relative; width: 28px; height: 28px; border: 1px solid #cccccc; background-color: #fff; border-radius: 28px; cursor: pointer; margin-right:10px; } input[type="radio"]{ display: none; } .radio-block label:after{ content: ''; display: block; position: absolute; width: 20px; height: 20px; left: 4px; top: 4px; background-color: #28bd12; border-radius: 20px; /*通过scale属性来控制中心点*/ -webkit-transform: scale(0); transform: scale(0); } /*选中样式*/ input[type="radio"]:checked + label{ background-color :#eee; -webkit-transition: background-color .3s ease-in; transition: background-color .3s ease-in; } /*选中之后的样式*/ input[type="radio"]:checked + label:after{ -webkit-transform: scale(1); transform: scale(1); -webkit-transition: transform .2s ease-in; transition: transform .2s ease-in; }
最后效果：
三.美化复选框
原理和单选框的制作方式类似。在checked的时候该表圆形的left值和label的背景。
.switch-block{ width: 980px; padding: 3% 0; margin: 0 auto; text-align: center; background-color: #fc9; } .switch-block label{ display: inline-block; width: 62px; height: 30px; background-color:#fafafa; border:1px solid #eee; border-radius: 16px; position: relative; margin-right: 10px; cursor: pointer; -webkit-transition: background .2s ease-in; transition :background .2s ease-in; } input[type="checkbox"]{ display: none; } .switch-block label:after{ content: ''; position: absolute; width: 28px; height: 28px; border: 1px solid #eee; border-radius: 14px; left: 1px; background-color:#fff; -webkit-transition: left .2s ease-in; transition: left .2s ease-in; } .switch-block input[type="checkbox"]:checked + label{ background-color:#3c6; -webkit-transition: background .2s ease-in; transition :background .2s ease-in; } .switch-block input[type="checkbox"]:checked + label:after{ left: 32px; -webkit-transition: left .2s ease-in; transition: left .2s ease-in; }
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
通过优先级对比验证CSS控制样式的三种方式
关于CSS banner图响应式居中显示的方法
CSS中如何使用负margin值来调整居中位置
以上就是关于CSS3美化表单的控件的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1610672.html
微信扫一扫 
支付宝扫一扫 
