前面有篇文章已经提供了如何修改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();
});
效果如下图：
版权声明：本文为博主原创文章，未经博主允许不得转载。