select文本居右

select,direction

拭目以待 发布于

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