如何更改rtl的html中select元素的箭头位置

问题描述

我想将选择元素的箭头位置更改为左侧，因为现在它覆盖了字符串，因为这是RTL编写系统。我通过CSS和HTML5做过很多事情，但是仍然不能很好地工作。

.spec {
  direction: "rtl";
}

<label for="">التخصص</label><br />
<select dir="rtl" name="" class="spec">
  <option dir="rtl" value="nursing"> تمريض </option>
  <option dir="rtl" value="lab">مختبر</option>
  <option dir="rtl" value="pharm">صيدلة</option>
</select>

解决方法

如果您不想移动它，则不必移动它。只需添加

select{
   padding-left: 15px; /*exact width of default arrow down*/
   box-sizing: border-box; /*optional if you also want to play with width property*/
}

也请在遇到此问题的地方添加浏览器..在Chrome，Firefox和IE中（所有最新版本都可以正常运行，而无需任何额外的CSS）

html html-select