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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,659评论 0 26
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,545评论 0 6
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,815评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,350评论 0 11
  • 独自在秘鲁的48个日夜,我和pepper spray的故事。 在host家晚上睡觉的时候,一般都是开着灯才能入睡,...
    sybil_yys阅读 281评论 0 1