表单的默认控件在不同的浏览器中的样式不同，用户体验很差。用CSS3可以实现表单控件的美化，可以提供更好的用户体验。不足之处就是浏览器的兼容性问题。
一.下拉控件
效果图：
下拉控件的布局结构：
XML/HTML Code复制内容到剪贴板
<divclass="container"><divclass="select"><p>所有选项</p><ul><liclass="selected"data-value="所有选项">所有选项</li><lidata-value="Python">Python</li><lidata-value="Javascript">Javascript</li><lidata-value="Java">Java</li><lidata-value="Ruby">Ruby</li></ul></div></div>ul用来模拟下拉列表，在实际的使用过程中，可以根据后台返回过来的数据动态生成。p元素用来渲染选中的选项。
核心样式：
CSS Code复制内容到剪贴板
.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:1pxsolid#ccc;border-bottom:1pxsolid#ccc;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition:transform.2sease-in,top.2sease-in;transition:transform.2sease-in,top.2sease-in;}.container.selectp{padding:015px;line-height:40px;cursor:pointer;}.container.selectul{list-style:none;background-color:#fff;width:100%;overflow-y:auto;position:absolute;top:40px;left:0;max-height:0;-webkit-transition:max-height.3sease-in;transition:max-height.3sease-in;}.container.selectulli{padding:015px;line-height:40px;cursor:pointer;}.container.selectulli:hover{background-color:#e0e0e0;}.container.selectulli.selected{background-color:#39f;color:#fff;}@-webkit-keyframesslide-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);}}@keyframesslide-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.onul{max-height:300px;-webkit-transform-origin:50%0;transform-origin:50%0;-webkit-animation:slide-down.5sease-in;animation:slide-down.5sease-in;}.container.select.on:after{-webkit-transform:rotate(-225deg);transform:rotate(-225deg);top:18px;}这里只是静态的样式，如果要实现“选择”这个过程，需要用到JavaScript来实现。
JavaScript Code复制内容到剪贴板
$(function(){varselected=$('.select>p');//控制列表显隐selected.on('click',function(event){$(this).parent('.select').toggleClass('on');event.stopPropagation();});//点击列表项,将列表项的值添加到p标签中$('.selectli').on('click',function(event){varself=$(this);selected.text(self.data('value'));});//点击文档其他区域隐藏列表$(document).on('click',function(){$('.select').removeClass('on');});});二.美化单选框
lable标签可以通过for属性与单选框实现联动。我们利用这一特性来实现美化单选框，这也是原理所在。还有就是别忘了将真正的单选框(type="radio")隐藏掉。
CSS Code复制内容到剪贴板
.radio-blocklabel{display:inline-block;position:relative;width:28px;height:28px;border:1pxsolid#cccccc;background-color:#fff;border-radius:28px;cursor:pointer;margin-right:10px;}input[type="radio"]{display:none;}.radio-blocklabel:after{content:'';display:block;position:absolute;width:20px;height:20px;left:4px;top:4px;background-color:#28bd12;border-radius:20px;-webkit-transform:scale(0);transform:scale(0);}input[type="radio"]:checked+label{background-color:#eee;-webkit-transition:background-color.3sease-in;transition:background-color.3sease-in;}input[type="radio"]:checked+label:after{-webkit-transform:scale(1);transform:scale(1);-webkit-transition:transform.2sease-in;transition:transform.2sease-in;}最后效果：
三.美化复选框
原理和单选框的制作方式类似。在checked的时候该表圆形的left值和label的背景。
CSS Code复制内容到剪贴板
.switch-block{width:980px;padding:3%0;margin:0auto;text-align:center;background-color:#fc9;}.switch-blocklabel{display:inline-block;width:62px;height:30px;background-color:#fafafa;border:1pxsolid#eee;border-radius:16px;position:relative;margin-right:10px;cursor:pointer;-webkit-transition:background.2sease-in;transition:background.2sease-in;}input[type="checkbox"]{display:none;}.switch-blocklabel:after{content:'';position:absolute;width:28px;height:28px;border:1pxsolid#eee;border-radius:14px;left:1px;background-color:#fff;-webkit-transition:left.2sease-in;transition:left.2sease-in;}.switch-blockinput[type="checkbox"]:checked+label{background-color:#3c6;-webkit-transition:background.2sease-in;transition:background.2sease-in;}.switch-blockinput[type="checkbox"]:checked+label:after{left:32px;-webkit-transition:left.2sease-in;transition:left.2sease-in;}本文链接：http://www.cnblogs.com/maple0x/p/5624401.html
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
