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

效果例如以下图：