select组件设置居右对齐, text-align无效

问题:在原生组件select中,需要设置居右对齐, 我设置了:

select{
  text-align: right;
}

但是无效,

搜索发现可以使用:

select{
    direction: rtl;
}

效果图:

 

搞定!

补充:

direction 属性规定文本的方向 / 书写方向。

该属性指定了块的基本书写方向，以及针对 Unicode 双向算法的嵌入和覆盖方向。不支持双向文本的用户代理可以忽略这个属性

direction: ltr;   // 默认值
direction: rtl;

ltr是初始值，表示left-to-right，就是从左往右的意思，就是内联内容是从左往右依次排布的，平时网页前后两个图片，默认情况下，DOM在前的就显示在左边。

rtl则是另外一个值，right-to-left缩写，就是从右往左的意思，就是内联内容是从右往左依次排布的，应用了这个CSS，则前后两个图片，默认情况下，DOM在前的就显示在右侧；而且是在容器的右端。

 

 

另外,可以在交换两个按钮时使用这个属性.

使用前:

 

direction: rtl;

使用后: