Safari:select下拉框的字体不能居中。

在chrome上使用text-align没有用,后来试了下text-align-last:center有作用,但是在Safari上 是无效的;
clipboard.png
Google后也没发现什么有价值的,有哪位遇到过吗?

阅读 13.6k
2 个回答

有一个hack的办法

在select的位置写一个span,用js去绑定span里的值和select的值,让span元素居中,隐藏掉select。

大约是这样的:

js的内容就自己写一下吧

.pesu-select {  
    text-align: center;    
    border:solid 1px #000;  
}  
.pesu-select select {  
    position: absolute;  
    left: 0px;  
    top: 0px;  
    width: 100%;  
    height: 42px;  
    opacity: 0;  
}  
   
<div class="pesu-select">  
    <span>aaa</span>  
    <select>  
        <option value="1">aaa</option>  
        <option value="2">bbb</option>  
        <option value="3">ccc</option>  
    </select>  
</div> 

其他途径解决问题:select外面包一层div,select的宽度不设置(由内容撑开),设置容器的宽度与text-align:center;

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题