这是个挺常见的IE11兼容性坑——原生<select>的默认箭头在Chrome、Firefox里显示正常，到IE11就消失了。大概率是你的CSS规则无意中覆盖了IE11对select箭头的默认渲染，咱们可以用以下两种方案解决：

方案1：强制显示IE11原生箭头 #

IE11提供了专门的伪元素::-ms-expand来控制select的下拉箭头，默认情况下如果它被设置为display: none或者被其他样式覆盖，箭头就会消失。咱们直接给它显式设置显示规则即可：

.dropdown-list::-ms-expand {
    display: block; /* 强制显示IE原生箭头 */
    background-color: transparent; /* 继承select背景色 */
    border: none; /* 去掉默认边框 */
    /* 可选：调整箭头位置和大小，适配你的布局 */
    margin-right: 0.5rem;
}

把这段CSS加到现有样式里，就能让IE11的原生箭头重新显示出来，样式会和IE的默认风格保持一致。

方案2：自定义跨浏览器统一箭头（推荐） #

如果想让所有浏览器的下拉箭头样式完全统一，或者原生箭头还是无法正常显示，可以用自定义箭头替代默认箭头。思路是给select的父容器添加一个伪元素作为箭头，同时隐藏所有浏览器的默认箭头：

修改后的CSS代码： #

.dropdown-wrapper { 
    position: relative; /* 为伪元素定位做准备 */
    padding-bottom: 1rem; 

    .dropdown-list { 
        width: 100%; 
        height: 4.1rem; 
        padding: .65rem 1.5rem; 
        padding-right: 3rem; /* 给自定义箭头留出右侧空间 */
        border-radius: .3rem; 
        font-size: 1.6rem; 
        font-weight: 300; 
        line-height: 1; 
        color: $color-black-mine-shaft; 
        background-color: $color-white; 
        border: 0.1rem solid $color-gray-nevada; 
        outline: none; 
        /* 隐藏Chrome/Firefox等现代浏览器的默认箭头 */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    /* 添加自定义箭头 */
    &::after {
        content: "▼"; /* 用字符作为箭头，也可以换成背景图片 */
        position: absolute;
        right: 1.5rem; /* 和select的左侧padding对齐 */
        top: 50%;
        transform: translateY(-50%); /* 垂直居中 */
        pointer-events: none; /* 点击箭头时不影响select的下拉交互 */
        font-size: 1.2rem;
        color: $color-gray-nevada; /* 箭头颜色和边框一致 */
    }
}

/* 隐藏IE11的原生箭头 */
.dropdown-list::-ms-expand {
    display: none;
}

方案优势： #

• 用-webkit-appearance: none等属性隐藏现代浏览器的默认箭头，用父容器伪元素替代，实现样式统一；
• 专门针对IE11用::-ms-expand隐藏原生箭头，确保自定义箭头唯一显示；
• pointer-events: none保证点击箭头区域时，仍然能触发select的下拉事件，不影响交互体验。

问题根源排查 #

出现这个问题的常见原因：

• 全局CSS重置（比如normalize.css）或自定义样式中，不小心给select设置了-webkit-appearance: none，虽IE11不识别该属性，但可能连带影响了默认箭头渲染；
• select的padding或width设置过宽，把箭头挤出了可视区域；
• 父容器的overflow: hidden属性把箭头裁切掉了。

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