修改select默认样式,兼容IE9

前面有篇文章已经提供了如何修改select标签的默认样式,但是只能兼容到ie10,要兼容ie9只能模拟一个类似的

html结构:


                                   
                                   

                               

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

效果如下图:

修改select默认样式,兼容IE9_第1张图片

你可能感兴趣的:(javascript)