修改select默认样式，兼容IE9

た入场券 2022-08-04 04:21 197阅读 0赞

前面有篇文章已经提供了如何修改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();   
            \});

效果如下图：

![20150817151248169][]

[20150817151248169]: /images/20220731/1f9fb34b582b4eabbd94aa41516bc55a.png