今天小编跟大家讲解下有关CSS3美化表单控件全集 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS3美化表单控件全集 的相关资料，希望小伙伴们看了有所帮助。
表单的默认控件在不同的浏览器中的样式不同，用户体验很差。用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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持爱蒂网。
来源：爱蒂网
