select文本居右

select文本居右,首先想到的是用text-align: right：

<select style="width:300px;text-align: right">
    <option>张三</option>
    <option>李四</option>
    <option>王五</option>
    <option>韓梅梅</option>
</select>

用text-align火狐下是OK的，但是在webkit内核的谷歌却是无效的，select原生的样式可控性的确是比较差的.但是使用css的direction却可以解决一下这个问题。

标签属性方式:

<select style="width:300px;" dir="rtl">
    <option>张三</option>
    <option>李四</option>
    <option>王五</option>
    <option>韓梅梅</option>
</select>

CSS方式：

<select style="width:300px;direction:rtl">
    <option>a</option>
    <option>123</option>
    <option>123</option>
    <option>123</option>
    <option>123</option>
    <option>123</option>
</select>

W3C上是这么介绍direction属性的

浏览器支持:
所有浏览器都支持 direction 属性。

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

属性值：
ltr 默认。文本方向从左到右。
rtl 文本方向从右到左。
inherit 规定应该从父元素继承 direction 属性的值。（任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。）

居中却不能用这种方法解决，在这里推荐个插件select2。
如果要使用带树级的下拉框，推荐个我之前写的select3。