养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

select标签文字居中

时间:2024-11-12 17:29:41

最近做网页的时候遇到这样一个问题,我们的select标签设置成width:100%之后,里面的文字无论怎么设置,在chrome里面都不能居中了,这个大概属于浏览器兼容性问题吧,最终在尽量少使用js的情况下,得到了一种解决办法,将思路和代码分享给大家。

方法/步骤

1、select标签,在不设置宽度的时候,仅仅设置一个text-align:center,在chrome里面也还是居中的,但是我们将width设置成100%后就不再居中了。

select标签文字居中

2、但是在firefox上面是居中的,这就是浏览器的兼容性问题,单纯的使用各种css样式将select标签居中是没有用的,我们需要美化一下select标签

select标签文字居中

3、我是在select标签的上面加了一个span标签,然后将select标签设置成position:absolute,这样select标签在层级上会位于span标签的上面

select标签文字居中

4、同时,我们需要将selec隋茚粟胫t标签刚好定位到span标签的“下面”,并且将select的透明度设为0;span设置text-align:ce荏鱿胫协nter;这样设置好后,我们点击span标签的位置,select会弹出,但是选中之后,span的文字内容不会发生变化

select标签文字居中

5、这些都设置好后,select标签就在span标签的下面了,我们还需要最关键的一步,获取选中的select的值,添加到span标签里面。

select标签文字居中

6、我们酋篚靶高需要使用jquery仓库的change函数获取select选中的option的值,赋给span标签,这样每次点击select后芟坳葩津,span的内容就会变了。我们使用js获取选中的option的值,并将这个值添加到span标签里面。这段js需要引用js的库文件的。

select标签文字居中

select标签文字居中

7、以上就是小渔的总结了,最后一步是关键。

© 一点知识