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

时间:2021-10-10 04:21:37

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

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

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

HTML、CSS小知识--兼容IE的下拉选择框selectHTML、CSS小知识--兼容IE的下拉选择框select
改成你需要的
在select外面套用一个div,设置div的样式,select的border:0; 就行啦!`(*∩_∩*)′(ps:手机端加上:-webkit-appearance:none; 去掉自带样式)