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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 00:48:46  来源:igfitidea点击:

Remove drop-down arrow from <select> element?

htmlcsshtml-select

提问by AlGallaf

Possible Duplicate:
How to remove the arrow from a <select> tag in Firefox

可能的重复:
如何从 Firefox 中的 <select> 标签中删除箭头

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

如何从 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.

类似于最高投票的答案。