用纯css改变下拉列表select框的默认样式兼容ie9需要用js

div.select{

　position:relative;
}

select {

  /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
  border: solid 1px #000;

  /*很关键：将默认的select选择框样式清除*/
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;

/*为下拉小箭头留出一点位置，避免被文字覆盖*/
  padding-right: 14px;
}


/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }

div.select:after { 

　　content: ' ';

 　　position: absolute;

　　 pointer-events: none;//值none：元素永远不会成为鼠标事件的target。pointer-events属性被指定为从下面的值列表中选择的一个关键字。详解此属性http://www.zhangxinxu.com/wordpress/2014/01/pointer-events-none-avoiding-unnecessary-paints/

　　border: 4px solid transparent; 

　　border-top-color: #B5B5B5; 

　　 z-index: 999; 

　　bottom: 8px;

　　right: 5px;

}

在我写代码过程中给select写：after根本不起作用 需要用div或者其他标签把select包起来 ，然后给 div添加：after这样子才行

目前适用于ie10及以上

 

 

 

兼容ie9

$(document).ready(function(){
　　if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE9.0") {
　　　　$("select").each(function(){
　　　　var _this=$(this);
　　　　if(_this.parent().hasClass("form-sel")){
　　　　　　_this.parent().append('<span class="jt1" style="position: absolute;top:1px;right:'+_this.css("paddingRight")+';20px;background:#fff;height:'+(_this.height()-2)+'px;"></span>');
　　　　}else{
　　　　　　_this.parent().append('<span class="jt1" style="position: absolute;top:0;right:'+_this.css("paddingRight")+';20px;background:#fff;height:'+_this.height()+'px;"></span>');
　　　　}
　　});
　}

}

如果是动态加载的select需要这样实现

if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE9.0") {
$(".gridselect select").each(function(){
var _this=$(this);
_this.parent().append('<span class="jt1" style="position: absolute;top:'+((_this.parent().height()- _this.height())/2)+'px;right:'+_this.css("paddingRight")+';20px;background:#fff;height:'+_this.height()+'px;"></span>');
});
}

在ie9下面还是有个小bug就是模拟的地方遮住下拉箭头的时候 点击会不出现下拉       

最好的办法还是模拟select  不用原生select