select下拉菜单美化简单美化效果-CSDN博客

默认状态下的select下拉菜单简直是丑爆了，所以下面就介绍一下一个简单的方式对select下拉菜单进行美化，下面就是一段这样的代码实例，当然也不够美观，这里只是提供一种美化的思路，在实际应用中可以进行更为优秀的美化，代码如下:

 
       <!DOCTYPE html> < 
       html 
       >  
      
       < 
       head 
       >  
      
       < 
       meta 
       charset 
       = 
       " utf-8" 
       >  
      
       < 
       meta 
       name 
       = 
       "author" 
       content 
       = 
       "http://www.softwhy.com/" 
       />  
      
       < 
       title 
       >蚂蚁部落</ 
       title 
       > 
      
       < 
       style 
       type 
       = 
       "text/css" 
       > 
      
       .select{ 
      
       margin-top:0px; 
      
       outline:none; 
      
       border:1px solid #BBBBBB; 
      
       border-radius:4px; 
      
       position:relative; 
      
       width:170px; 
      
       } 
      
       .text{ 
      
       height:40px; 
      
       -webkit-appearance:none; 
      
       appearance:none; 
      
       border:none; 
      
       font-size:18px; 
      
       padding:0px 10px; 
      
       display:block; 
      
       width:100%; 
      
       -webkit-box-sizing:border-box; 
      
       box-sizing:border-box; 
      
       background-color:#FFFFFF; 
      
       color:#333333; 
      
       border-radius:4px; 
      
       } 
      
       </ 
       style 
       > 
      
       </ 
       head 
       >  
      
       < 
       body 
       >  
      
       < 
       div 
       class 
       = 
       "select" 
       >  
      
       < 
       select  
       class 
       = 
       "text" 
       >  
      
       < 
       option 
       >--选择科目--</ 
       option 
       >  
      
       < 
       option 
       >css教程</ 
       option 
       >  
      
       < 
       option 
       >div教程</ 
       option 
       > 
      
       < 
       option 
       >javascript教程</ 
       option 
       > 
      
       < 
       option 
       >jquery教程</ 
       option 
       > 
      
       </ 
       select 
       >  
      
       </ 
       div 
       >  
      
       </ 
       body 
       >  
      
       </ 
       html 
       >