如何在Chrome浏览器中隐藏<select>下拉框箭头？

嘿，我来帮你搞定Chrome里隐藏下拉框箭头的问题！其实Chrome（包括基于WebKit/Blink内核的浏览器，比如Edge、Safari）的处理方式和Firefox略有不同，核心是利用WebKit的私有CSS属性来覆盖默认样式。

核心CSS代码 #

你可以给目标下拉框（<select>元素）添加以下样式：

select {
  /* 移除WebKit内核浏览器的默认下拉箭头 */
  -webkit-appearance: none;
  /* 标准属性，兼容更多现代浏览器 */
  appearance: none;
  /* 可选：添加右侧内边距，避免文字贴到元素边缘 */
  padding-right: 1.5em;
  /* 可选：设置背景色，清除默认样式残留 */
  background-color: #fff;
  /* 可选：添加边框保持视觉一致性 */
  border: 1px solid #ccc;
  border-radius: 4px;
}

关键说明 #

• -webkit-appearance: none;：这是针对Chrome这类WebKit/Blink内核浏览器的核心属性，直接移除默认的下拉箭头样式。
• appearance: none;：这是CSS标准属性，用来兼容未来支持标准的浏览器，同时也能覆盖部分其他内核的默认样式。
• 添加padding-right是因为默认箭头会占据一定空间，移除后如果不加内边距，文字可能会贴到元素最右侧，影响视觉体验。
• 如果需要自定义箭头样式，可以把background-color替换成background-image，再通过background-position调整自定义箭头的位置。

跨浏览器兼容写法（含Firefox） #

既然你已经搞定了Firefox，这里可以把两种浏览器的处理逻辑合并，确保样式统一：

select {
  /* Firefox专属属性 */
  -moz-appearance: none;
  /* WebKit/Blink专属属性 */
  -webkit-appearance: none;
  /* 标准属性 */
  appearance: none;
  padding-right: 1.5em;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* 清除Firefox下拉框的默认内边距和边框残留 */
select::-moz-focus-inner {
  border: 0;
  padding: 0;
}

这样写就能同时在Firefox和Chrome（以及其他现代浏览器）里隐藏默认下拉框箭头啦！

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