iOS端<select>内Options无法右对齐或响应RTL方向问题求助

方案一：给select和option同时设置RTL属性 #

很多浏览器需要先让select容器本身启用RTL方向，option的样式才会生效，试试这段CSS：

.select select {
  direction: rtl;
}
.select select option {
  direction: rtl;
  text-align: right;
}

方案二：用自定义组件替代原生select #

原生select的option样式受浏览器限制极大，不同浏览器渲染规则不一样，如果方案一无效，直接用HTML+CSS模拟一个自定义select，完全控制排版：

<div class="custom-select">
  <div class="select-trigger">请选择选项</div>
  <div class="options-list">
    <div class="option">测试选项1</div>
    <div class="option">测试选项2</div>
    <div class="option">测试选项3</div>
  </div>
</div>

.custom-select {
  position: relative;
  width: 220px;
}
.select-trigger {
  padding: 8px 15px;
  border: 1px solid #ddd;
  background: #fff;
  text-align: right;
  direction: rtl;
  cursor: pointer;
}
.options-list {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  border: 1px solid #ddd;
  background: #fff;
  direction: rtl;
}
.custom-select:hover .options-list {
  display: block;
}
.option {
  padding: 8px 15px;
  text-align: right;
  cursor: pointer;
}
.option:hover {
  background-color: #f5f5f5;
}

方案三：针对Firefox的特殊兼容 #

如果是Firefox浏览器不生效，给option加上unicode-bidi: embed属性，强制文本方向生效：

.select select option {
  direction: rtl;
  text-align: right;
  unicode-bidi: embed;
}

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