Html 从 <select> 元素中删除下拉箭头?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/10862050/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove drop-down arrow from <select> element?
提问by AlGallaf
Possible Duplicate:
How to remove the arrow from a <select> tag in Firefox
The arrow only disappears in Chrome. Here is the script that I'm using:
箭头仅在 Chrome 中消失。这是我正在使用的脚本:
<style type="text/css">
select {
font-family: 'Viga', sans-serif;
font-size:16px;
color:#168ACB;
padding: 5px 10px 5px 10px;
margin: 0px 5px 5px 5px;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #eaeaea inset;
-moz-box-shadow: 0 3px 0 #ccc, 0 -1px #eaeaea inset;
box-shadow: 0 3px 0 #ccc, 0 -1px #eaeaea inset;
background: #f8f8f8;
border:none;
outline:none;
display: inline-block;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
cursor:pointer;
}
</style>
Chrome: http://i.imgur.com/Ocpux.pngFirefox & IE: http://i.imgur.com/5zGuX.png
铬:http: //i.imgur.com/Ocpux.png火狐和 IE:http: //i.imgur.com/5zGuX.png
回答by Playmaker
Try seeing this:
试试看这个:
How to remove the arrow from a select element in Firefox
Coincidentally my comment:
巧合的是我的评论:
"Tried encapsulating that in a div with overflow hidden? Div will have width < Width of select."
“尝试将其封装在隐藏溢出的 div 中?Div 的宽度 < 选择宽度。“
is similar to the highest voted answer.
类似于最高投票的答案。