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"。)