您的位置:首页 > 移动开发 > 微信开发

解决手机浏览器和微信中select中border:none;无用和去掉小三角

2015-11-16 11:01 525 查看
设置select的边框为none;在PC端是没有问题的,但是放到手机浏览器和微信里上还是会出现边框

解决办法:

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


appearance使用方法

.elmClass{
-webkit-appearance: value;
-moz-appearance: value;
appearance: value;
}


例子:使用appearance属性改变元素的外观

<p class="lookLikeAButton">我是一个段落P元素 </p>
<p class="lookLikeAListbox">我是一个段落P元素 </p>
<p class="lookLikeAListitem">我是一个段落P元素 </p>
<p class="lookLikeASearchfield">我是一个段落P元素 </p>
<p class="lookLikeATextarea">我是一个段落P元素 </p>
<p class="lookLikeAMenulist">我是一个段落P元素</p>


/*看起来像个按钮,以按钮的风格渲染*/
.lookLikeAButton{
-webkit-appearance:button;
-moz-appearance:button;
}
/*看起来像个清单盒子,以listbox风格渲染*/
.lookLikeAListbox{
-webkit-appearance:listbox;
-moz-appearance:listbox;
}
/*看起来像个清单列表,以listitem风格渲染*/
.lookLikeAListitem{
-webkit-appearance:listitem;
-moz-appearance:listitem;
}
/*看起来像个搜索框,以searchfield风格渲染*/
.lookLikeASearchfield{
-webkit-appearance:searchfield;
-moz-appearance:searchfield;
}
/*看起来像个文本域,以textarea风格渲染*/
.lookLikeATextarea{
-webkit-appearance:textarea;
-moz-appearance:textarea;
}
/*看起来像个下接菜单,以menulist风格渲染*/
.lookLikeAMenulist{
-webkit-appearance:menulist;
-moz-appearance:menulist;
}




更多内容可以参考http://www.w3school.com.cn/cssref/pr_appearance.asp
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: