SCSS隐藏禁用select下拉箭头失效：appearance属性不生效

我来帮你排查下这个问题！你的SCSS逻辑方向是对的，但有几个细节需要调整，才能让禁用状态的下拉箭头彻底隐藏：

问题分析 #

你已经尝试了-webkit-appearance: none这类核心属性，但可能因为优先级不足、浏览器前缀的细节处理或者属性应用顺序，导致样式没覆盖掉浏览器的默认规则。另外，IE/Edge专属的::-ms-expand伪元素，也需要更强的优先级才能生效。

修正后的SCSS代码 #

select.btn-underline-primary {
  box-shadow: none !important;
  padding-left: 0;
  color: $dark !important;

  option {
    border: none;
  }

  &:disabled {
    border-bottom-color: transparent;
    // 核心：重置外观以移除默认箭头，确保覆盖浏览器样式
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    // IE/Edge专属箭头隐藏，加!important提升优先级
    &::-ms-expand {
      display: none !important;
    }
  }
}

关键调整点说明 #

• 强化::-ms-expand的优先级：给它加上!important，因为IE/Edge的默认下拉箭头样式优先级很高，普通display: none容易被覆盖。
• 属性顺序优化：把appearance相关属性放在前面，让浏览器先解析重置规则，再处理IE专属的伪元素样式。
• 确认元素状态：检查你的select元素是否确实添加了disabled属性，且btn-underline-primary类直接绑定在select标签上（别误加到父容器哦）。

如果还是没生效，可以试试用更明确的选择器来提升优先级，避免嵌套可能带来的样式权重问题：

// 直接写平级选择器，优先级更高
select.btn-underline-primary:disabled {
  border-bottom-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  &::-ms-expand {
    display: none !important;
  }
}

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