怎么去掉select边框和小三角,appearance用法

今天写微信网站的静态页面,想去掉select自带的小三角和边框,用以往的办法不行了,微信内置的是qq浏览.

以往的办法:设置select的边框为0px,背景设成透明(background: transparent;),这时候你会看到边框没有了,但是小三角还是在的.

再在select外面加个div,固定死div的宽度,并且加超出隐藏属性(overflow: hidden;)再设置select的宽度,大于div的宽度,小三角会隐藏掉.

但是上面这个方法在微信里面根本无效果.百度了许久,终于找到方法了,给select添加下面css代码:

1. appearance:none;
2. -moz-appearance:none; /* Firefox */
3. -webkit-appearance:none; /* Safari 和 Chrome */

就这样,问题解决了!
注:手机QQ浏览器或微信使用第二种方法,其他的可以使用第一种方法.

本文转至木木博客