改动select默认样式，兼容IE9

前面有篇文章已经提供了怎样改动select标签的默认样式，可是仅仅能兼容到ie10，要兼容ie9仅仅能模拟一个类似的

html结构：

<div class="select_diy">

<select>

<option value="产品咨询1">产品咨询1</option>

<option value="产品咨询2">产品咨询2</option>

<option value="产品咨询3">产品咨询3</option>

<option value="产品咨询4">产品咨询4</option>

</select>

<div class="select_diy_select"></div>

</div>

css样式：

.contactus2_con select{

-webkit-appearance: none;

-moz-appearance: none;

appearance:none;

background:none;

background:url("../images/select.jpg") right center no-repeat;

background:white\9\0;

width:490px;

border:1px solid #d9d9d9;

height:30px;

cursor:pointer;

}

.contactus2_con select::-ms-expand{

color: #fff;

font-size:20px;

padding:5px 9px;

background: #0054a7;

}

.select_diy{

position:relative;

width:490px;

}

.select_diy_select{

position:absolute;

top:0px;

right:0px;

width:37px;

height:30px;

background:url("../images/select.jpg") center center;

border-radius:0px 4px 4px 0px;

cursor:pointer;

}

js：

$(".select_diy_select").click(function(){

var $target = $(this).siblings("select");

var $clone = $target.clone();

$clone.val($target.val()).css({

position: 'absolute',

'z-index': 999,

width:$target.width(),

left: $target.offset().left,

top: $target.offset().top + $target.height()

}).attr('size', $clone.find('option').length).change(function() {

$target.val($clone.val());

}).on('click blur',function() {

$(this).remove();

});

$('body').append($clone);

$clone.focus();

});

效果例如以下图：