>  기사  >  웹 프론트엔드  >  解决手机浏览器和微信中select中border:none;无用和去掉小三角_html/css_WEB-ITnose

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

WBOY
WBOY원래의
2016-06-24 11:33:371303검색

设置select的边框为none;在PC端是没有问题的,但是放到手机浏览器和微信里上还是会出现边框

解决办法:

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

appearance使用方法

1 .elmClass{2  -webkit-appearance: value;3  -moz-appearance: value;4  appearance: value;5 }

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

1 <p class="lookLikeAButton">我是一个段落P元素 </p>2 <p class="lookLikeAListbox">我是一个段落P元素 </p>3 <p class="lookLikeAListitem">我是一个段落P元素 </p>4 <p class="lookLikeASearchfield">我是一个段落P元素 </p>5 <p class="lookLikeATextarea">我是一个段落P元素 </p>6 <p class="lookLikeAMenulist">我是一个段落P元素</p>

 1 /*看起来像个按钮,以按钮的风格渲染*/ 2 .lookLikeAButton{ 3  -webkit-appearance:button; 4  -moz-appearance:button; 5 } 6 /*看起来像个清单盒子,以listbox风格渲染*/ 7 .lookLikeAListbox{ 8  -webkit-appearance:listbox; 9  -moz-appearance:listbox;10 }11 /*看起来像个清单列表,以listitem风格渲染*/12 .lookLikeAListitem{13  -webkit-appearance:listitem;14  -moz-appearance:listitem;15 }16 /*看起来像个搜索框,以searchfield风格渲染*/17 .lookLikeASearchfield{18  -webkit-appearance:searchfield;19  -moz-appearance:searchfield;20 }21 /*看起来像个文本域,以textarea风格渲染*/22 .lookLikeATextarea{23  -webkit-appearance:textarea;24  -moz-appearance:textarea;25 }26 /*看起来像个下接菜单,以menulist风格渲染*/27 .lookLikeAMenulist{28  -webkit-appearance:menulist;29  -moz-appearance:menulist;30 }

 

 

更多内容可以参考http://www.w3school.com.cn/cssref/pr_appearance.asp

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.