去掉页面默认的select的边框和右侧的小三角

今天做一个微信项目的时候,用到了下拉菜单select,但是发现select默认的边框和右侧的小三角有点碍眼,所以就把他们都隐藏掉了,在这里分享一下。

可以css设置select的边框为0,即border:0;隐藏右侧默认小三角的方法试

appearance:none;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari 和 Chrome */

这样就可以轻松解决上面的问题。

appearance是css3新加的属性,现在所有的浏览器都不支持这个属性。火狐浏览器用这个方法-moz-appearance:none;safari和谷歌浏览器-webkit-appearance:none;用这个方法解决。

另外一种方法是写一个隐藏的span标签。然后给select定位在span标签的上方。另外需要设置select的透明度为0。也可以解决上面的问题。

原文链接:,转发请注明来源!

发表评论

要发表评论,您必须先登录