如何在IE11中优化Select组件样式并移除右侧默认箭头？

嘿，IE11的Select样式真的是前端老玩家的噩梦，那种和现代浏览器格格不入的架构设计，每次遇到都让人头大！不过移除它右侧的默认箭头还是有办法的，给你分享几个靠谱的方案：

方案一：IE专属伪元素直接隐藏 #

IE11为Select元素提供了一个专属的伪元素::-ms-expand，专门用来控制右侧的下拉箭头，直接把它隐藏就行：

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

这个方法最直接，只针对IE11生效，完全不会影响其他浏览器的默认样式。

方案二：配合全局样式重置做自定义改造（可选） #

如果你还想给Select做更彻底的自定义样式（比如替换成自己设计的箭头），可以在隐藏默认箭头后，搭配自定义背景图来实现：

/* 先给非IE浏览器做样式重置 */
select {
    -webkit-appearance: none; /* 适配Chrome/Safari等webkit内核 */
    -moz-appearance: none; /* 适配Firefox */
    appearance: none;
    padding-right: 25px; /* 给自定义箭头预留空间 */
    border: 1px solid #ddd;
}

/* IE11单独处理默认箭头 */
select::-ms-expand {
    display: none;
}

/* 自定义箭头示例 */
.custom-select {
    background: url('你的自定义箭头图标路径') no-repeat right 10px center;
    background-size: 12px;
}

要注意的是，appearance属性在IE11里不生效，所以必须单独用::-ms-expand来处理它的默认箭头。另外IE11对Select的样式限制很多，没法直接修改默认箭头的颜色，隐藏后用自定义背景图是最稳妥的自定义方案。

内容的提问来源于stack exchange，提问作者Luigi Briganti