改动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();
 

            });

效果例如以下图：