HTML、CSS小知识--兼容IE的下拉选择框select

HTML

<div class="s_h_ie">
　　<select id="Select1" disabled="disabled" runat="server">
　　　　<option value="寻人求助">寻人求助</option>
　　　　<option value="寻人求助">寻人求助</option>
　　　　<option value="寻人求助">寻人求助</option>
　　</select>

</div>

CSS

/*在IE中兼容select下拉箭头（亲测可用）*/
.s_h_ie
{
background:#fff url(../../App_Themes/default/images/select_list.png) no-repeat top 12px right 15px;
width:150px;
height:28px;
overflow:hidden;
border:1px solid #e1e1e1;
border-radius:5px;
}

.s_h_ie select
{
background:transparent!important;
padding-left:4px!important;
width:170px!important;
height:100%!important;
border:none!important;
}

在IE6里面的下拉选择框(默认)这样的，不好看

改成你需要的

 

在select外面套用一个div，设置div的样式，select的border：0; 就行啦!`(*∩_∩*)′（ps：手机端加上:-webkit-appearance:none; 去掉自带样式）