原生select组件在ios的居中问题

[rudyxu1102]

问题描述

select组件在ios无法居中

解决过程

去StackOverflow找找

在StackOverflow上搜索解决的方法，通过搜索select center，可以找到对应问题的链接。

解决方案：

select { 
    width: 400px; 
    text-align-last:center; 
}

使用text-align-last属性，意思为最后一行居中。

但是，在ios的safari没有作用，安卓可以居中。

去google全局找一下

终于，在一个github里面找到了解决的方法。代码链接

解决方案：使用js，用span代替option居中

 <label
    for="foo"
    class="center-select"
  >
    <select
      id="foo"
      class="center-select__input"
      onchange="handleChange(this)"
    >
      <option value="Option 1">Option 1</option>
      <option value="Option 2">Option 2</option>
      <option value="Option 3">Option 3</option>
    </select>
    <span class="center-select__text">
      Option 1
    </span>
  </label>