首页 > 移动平台 > 详细

去除select边框和三角-----appearance:none

时间:2018-06-08 19:00:13      阅读:207      评论:0      收藏:0      [点我收藏+]

今天发现一个比较有意思的属性,appearance:none

可能有朋友不认识,但是有一个标签你肯定认识:select。

这个标签的样式是这样的:技术分享图片

一般情况下,我们所使用的border:0; 去除边框这种方式在某些浏览器是对它是不起作用的,比如:Opera 浏览器下就没有作用。

再拿google浏览器举例,虽然有作用,边框可以去除掉,但是右边的倒三角却保留了下来。

比如这样:技术分享图片

如果想要将select的边框和倒三角全部去除掉,这里有两个方法和大家分享一下。

1.可以在select的外部包一个div标签,设置超出隐藏属性,设置好里面select的宽度和高度即可。

2.如果觉得上面的方法比较麻烦,可以使用Css3的一个属性。

appearance:none

-moz-appearance:none /*火狐*/

-webkit-appearance:none /*苹果和谷歌*/

去除select边框和三角-----appearance:none

原文:https://www.cnblogs.com/alantao/p/9157140.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!