您的位置:首页技术文章
文章详情页

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

【字号: 日期:2024-06-10 15:43:49浏览:29作者:猪猪
导读:问题描述在chrome上使用text-align没有用,后来试了下text-align-last:center有作用,但是在Safari上 是无效的;Google后也没发现什么有价...

问题描述

在chrome上使用text-align没有用,后来试了下text-align-last:center有作用,但是在Safari上 是无效的;前端 - Safari:select下拉框的字体不能居中。Google后也没发现什么有价值的,有哪位遇到过吗?

问题解答

回答1:

有一个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; } <p class='pesu-select'> <span>aaa</span> <select> <option value='1'>aaa</option> <option value='2'>bbb</option> <option value='3'>ccc</option> </select> </p> 回答2:

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

相关文章: