CSS3美化表单控件全集

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

下拉控件的布局结构：

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元素用来渲染选中的选项。
 
核心样式：

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;