实现select下拉框字体居中——兼容解决select在Safari、Chrome不居中问题

时间: 2018-03-26阅读: 6078标签: select

在网页开发中遇到这样一个问题,在使用select的时候,想让里面的文字水平居中。首先想到的是text-align:center;但是发现在Chrome浏览器下不兼容,需要使用到text-align-last:center;就可以了。代码如下:


select{
	width: 400px;
	text-align:center;
	text-align-last:center;/*兼容chrome*/
}
</style>
<select>
	<option value="1">No-1</option>
	<option value="2">No-2-我的内容很多哦。哈哈</option>
</select>


但是上面代码在Safari上没起作用;如果不考虑Safari的兼容上面代码就可以了。如果要兼容,我们可以在用一个div包裹select,在该div内添加一个span元素,用js去绑定span里的值和select的值,让span元素居中,隐藏掉select就可以了。代码如下:


css:

<style>
#box{
     width: 400px;
     border: 1px solid #ddd;
     text-align: center;
     position: relative;
}
select{
    position: absolute;  
    left: 0px;  
    top: 0px;  
    width: 100%;  
    height: 100%;  
    opacity: 0; 
}
</style>


html:

<div id="box">
	<span id="show">No-1</span>  
	<select>
		<option value="1">No-1</option>
		<option value="2">No-2-我的内容很多哦。哈哈</option>
	</select>
</div>


js:

<script>
window.onload=function(){
	var show=document.getElementById('show');
	var sel=document.getElementsByTagName('select')[0];
	sel.onchange=function(){
		var index=sel.selectedIndex; //序号,取当前选中选项的序号
		show.innerText=sel.options[index].text;
	}
}
</script>


这样就可以简单模拟实现select居中的效果了,但是上面代码并不完善,例如没有下拉框的箭头,这个大家可以自己添加上去。在js上面如果使用了框架,如vue,angularjs等,就可以很简单的实现数据的双向绑定,实现就更简洁了。

 

延伸:如何让option的文字居中呢?

无论怎么尝试,都没发现能完美解决option中的值居中的方法。大部分需要这样的需求的同学,可能也是加空格来实现的,或者不使用select,利用div,js等完全模拟select下拉框效果。当然说实话:select的option居中效果很难看,你可以想象option中的值长度不一,居中还不如靠左对齐呐。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/550

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广