自定义下拉框样式兼容IE8

使用纯CSS修改下拉框样式在IE8下，

select::-ms-expand { display: none; }

这个是没有效果的，无法隐藏掉右边小箭头，所以只能自己写一个下拉框，简单可复用。

css

.wy_selectActive{
	width: 400px;
	
}
.wy_select{
	width: 400px;
	height: 37px;
	border: 2px #FFFFFF solid;
	padding-right: 20px;
	padding-left:20px;
	background:url(../01.png) no-repeat scroll 98% 50% transparent;
	float: left;
}
.wy_select_text{
	font-size: 22px;
	color: #FFFFFF;
	line-height: 37px;
	font-family: arial;
}
.wy_option{
	width: 440px;
	border: 2px #FFFFFF solid;
	float: left;
	display: none;
}
.wy_option_item{
	width: 440px;
	height: 37px;
	font-size: 22px;
	color: #FFFFFF;
	line-height: 37px;
	font-family: arial;
	cursor: pointer;
}
.wy_option_text{
	margin-left: 20px;
}
.wy_option_item_hover{
	background-color: #FFFFFF;
	color: #333333;
}

js

var wySelectDisId;
window.onload = function(){
		   document.onclick = function(e){
                e = e || window.event;
                var dom =  e.srcElement|| e.target;
				if(wySelectDisId != null&& wySelectDisId != ""&&wySelectDisId !=undefined){
	                if(dom.id != wySelectDisId && document.getElementById(wySelectDisId).style.display == "block") {
	                    document.getElementById(wySelectDisId).style.display = "none";
						wySelectDisId = "";
	                }
				}
			}
			
            /*ie8下没有classlist*/
			if (!("classList" in document.documentElement)) {
			  Object.defineProperty(window.Element.prototype, 'classList', {
				get: function () {
				  var self = this
			 
				  function update(fn) {
					return function () {
					  var className = self.className.replace(/^\s+|\s+$/g, ''),
						valArr = arguments
			 
					  return fn(className, valArr)
					}
				  }
			 
				  function add_rmv (className, valArr, tag) {
					for (var i in valArr) {
					  if(typeof valArr[i] !== 'string' || !!~valArr[i].search(/\s+/g)) throw TypeError('the type of value is error')
					  var temp = valArr[i]
					  var flag = !!~className.search(new RegExp('(\\s+)?'+temp+'(\\s+)?'))
					  if (tag === 1) {
						!flag ? className += ' ' + temp : ''
					  } else if (tag === 2) {
						flag ? className = className.replace(new RegExp('(\\s+)?'+temp),'') : ''
					  }
					}
					self.className = className
					return tag
				  }
			 
				  return {
					add: update(function (className, valArr) {
					  add_rmv(className, valArr, 1)
					}),
			 
					remove: update(function (className, valArr) {
					  add_rmv(className, valArr, 2)
					}),
			 
					toggle: function (value) {
					  if(typeof value !== 'string' || arguments.length === 0) throw TypeError("Failed to execute 'toggle' on 'DOMTokenList': 1 argument(string) required, but only 0 present.")
					  if (arguments.length === 1) {
						this.contains(value) ? this.remove(value) : this.add(value)
						return
					  }
					  !arguments[1] ? this.remove(value) : this.add(value)
					},
			 
					contains: update(function (className, valArr) {
					  if (valArr.length === 0) throw TypeError("Failed to execute 'contains' on 'DOMTokenList': 1 argument required, but only 0 present.")
					  if (typeof valArr[0] !== 'string' || !!~valArr[0].search(/\s+/g)) return false
					  return !!~className.search(new RegExp(valArr[0]))
					}),
			 
					item: function (index) {
					  typeof index === 'string' ? index = parseInt(index) : ''
					  if (arguments.length === 0 || typeof index !== 'number') throw TypeError("Failed to execute 'toggle' on 'DOMTokenList': 1 argument required, but only 0 present.")
					  var claArr = self.className.replace(/^\s+|\s+$/, '').split(/\s+/)
					  var len = claArr.length
					  if (index < 0 || index >= len) return null
					  return claArr[index]
					}
				  }
				}
			  })
			}
		}
		
		function wySelectClick(Id,e){
			document.getElementById(Id).style.display = "block";
			wySelectDisId = Id;
			e = e||window.event;
            if(+'\v1') {
                e.stopPropagation();
            } else  {
                e.cancelBubble = true;
            }
		}
		function wyOptionItemAddhover(Dom){
			document.getElementById("wy_select_test").children[0].innerHTML =    Dom.children[0].innerHTML;     
                                                                
			Dom.classList.add("wy_option_item_hover");
		}
		function wyOptionItemRemovehover(Dom){
			Dom.classList.remove("wy_option_item_hover");
		}

html

        <div class="wy_selectActive" >
				<div class="wy_select" id="wy_select_test"    onclick="wySelectClick('wy_option_test')"  >
					<div class="wy_select_text">测试文字</div>
				</div>
				<div class="wy_option" id="wy_option_test" >
					<div class="wy_option_item" onmouseover="wyOptionItemAddhover(this)" onmouseout="wyOptionItemRemovehover(this)">
						<div class="wy_option_text">测试文字1</div>
					</div>
					<div class="wy_option_item" onmouseover="wyOptionItemAddhover(this)" onmouseout="wyOptionItemRemovehover(this)">
						<div class="wy_option_text">测试文字2</div>
					</div>
					<div class="wy_option_item" onmouseover="wyOptionItemAddhover(this)" onmouseout="wyOptionItemRemovehover(this)">
						<div class="wy_option_text">测试文字3</div>
					</div>
					<div class="wy_option_item" onmouseover="wyOptionItemAddhover(this)" onmouseout="wyOptionItemRemovehover(this)">
						<div class="wy_option_text">测试文字4</div>
					</div>
				</div>
           </div>

如果classList不生效的话，还有个更原始的方法

function wyOptionItemAddhover(Dom){
		document.getElementById("wy_select_test_default").children[0].innerHTML = Dom.children[0].innerHTML;
		// Dom.classList.add("wy_option_item_hover");
		Dom.className = Dom.className +" wy_option_item_hover";
		
	}
	function wyOptionItemRemovehover(Dom){
		// Dom.classList.remove("wy_option_item_hover");
		   Dom.className = Dom.className.replace(/(^|\s+)wy_option_item_hover(?=$|\s+)/,"");
		
	}