用纯css改变下拉列表select框的默认样式-dehua.Chen

将浏览器默认的下拉框样式清除，然后应用上自己的，再附一张向右对齐小箭头的图片即可。

  1   select  {
  2   /*  Chrome和Firefox里面的边框是不一样的，所以复写了一下  */ 
  3     border :  solid 1px #000 ;
  4  
  5   /*  很关键：将默认的select选择框样式清除  */ 
  6     appearance : none ;
  7     -moz-appearance : none ;
  8     -webkit-appearance : none ;
  9   /*  在选择框的最右侧中间显示小箭头图片  */ 
 10     background :  url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent ;
 11   /*  为下拉小箭头留出一点位置，避免被文字覆盖  */ 
 12     padding-right :  14px ;
 13  }
 14   /*  清除ie的默认选择框样式清除，隐藏下拉箭头  */ 
 15   select::-ms-expand  {  display :  none ; } 

查看更多关于用纯css改变下拉列表select框的默认样式-dehua.Chen的详细内容...