如何调整select元素的下拉按钮默认位置，将其从右侧切换至左侧

原生CSS兼容实现（推荐，覆盖绝大多数现代浏览器） #

实现思路是先清除浏览器默认的下拉箭头样式，再手动自定义左侧箭头，配合RTL属性调整排版：

• 给select标签添加dir="rtl"属性，声明文字排版方向为从右到左
• 用appearance系列属性清除不同浏览器的原生下拉箭头样式
• 通过背景图设置左侧自定义下拉箭头，调整内边距避免文字与箭头重叠

完整代码示例 #

/* RTL模式select样式 */
select.rtl-select {
  /* 清除浏览器默认下拉箭头 */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* 自定义左侧箭头，内嵌svg避免外部资源依赖 */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat left 8px center;
  /* 左侧预留28px位置放箭头，右侧保留正常边距 */
  padding: 6px 12px 6px 28px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  direction: rtl;
}

/* 若需要下拉选项内文字保持LTR排版，添加以下规则 */
select.rtl-select option {
  direction: ltr;
}

<!-- HTML调用示例 -->
<select class="rtl-select" dir="rtl">
  <option value="ar">العربية</option>
  <option value="fa">فارسی</option>
  <option value="he">עברית</option>
</select>

兼容性兜底说明 #

• 部分高版本Chrome、Firefox浏览器在标签设置dir="rtl"时会自动将原生箭头移到左侧，但不同版本表现不统一，建议搭配自定义样式使用
• 针对Firefox低版本-moz-appearance: none不生效的问题，可以补充以下样式：

text-indent: 1px;
text-overflow: '';

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