css - 如何针对 IE 选择标签样式

Question

我正在使用 select 标签，以下是我用来隐藏元素附带的默认下拉按钮的 css:

select,
input { 
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    -ms-appearance: none;
    appearance: none;
}

它适用于除 IE 之外的所有浏览器。我尝试使用扩展选项，但也不起作用。

select::-ms-expand{
    display: none;
}

如何隐藏 select 标签的下拉菜单，以便添加我想要的图标？

提前致谢

Answer 1

将 select 标记包裹在 div 中并进行一些调整。你会得到想要的效果。看片段

选择::-ms-展开{ 显示:无；

将在 IE 10 及更高版本上工作，对于 IE 9 及更低版本，我们可以简单地通过使包装器的宽度小于 select 元素的宽度来做一个技巧。因此，插入符号按钮将溢出父级并隐藏。

.select{
    width:80px;
    overflow:hidden;
    border: 1px solid #333;
    padding: 0;
}
select::-ms-expand {
    display: none;
}
.select select{
    width: 120px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 6px 15px;
    border: none;
    background: transparent url("https://cdn2.iconfinder.com/data/icons/navigation-set-arrows-part-two/32/Arrow_Download-16.png")       no-repeat 60px center;
    outline: 0;
}

<div class="select">
     <select>
          <option value="1">Option</option>
          <option value="2">Option</option> 
          <option value="3">Option</option> 
     </select>  
 </div>