Html 如何从 Firefox 中的选择元素中删除箭头
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5912791/
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
How to remove the arrow from a select element in Firefox
提问by RussellUresti
I'm trying to style a selectelement using CSS3. I'm getting the results I desire in WebKit (Chrome / Safari), but Firefox isn't playing nicely (I'm not even bothering with IE). I'm using the CSS3 appearanceproperty, but for some reason I can't shake the drop-down icon out of Firefox.
我正在尝试select使用 CSS3设置元素的样式。我在 WebKit（Chrome / Safari）中得到了我想要的结果，但 Firefox 的运行效果不佳（我什至不介意 IE）。我正在使用 CSS3appearance属性，但由于某种原因，我无法摆脱 Firefox 的下拉图标。
Here's an example of what I'm doing: http://jsbin.com/aniyu4/2/edit
这是我正在做的一个例子：http: //jsbin.com/aniyu4/2/edit
#dropdown {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background: transparent url('example.png') no-repeat right center;
padding: 2px 30px 2px 2px;
border: none;
}
As you can see, I'm not trying for anything fancy. I just want to remove the default styles and add in my own drop-down arrow. Like I said, great in WebKit, not great in Firefox. Apparently, the -moz-appearance: nonedoesn't get rid of the drop-down item.
正如你所看到的，我并没有尝试任何花哨的东西。我只想删除默认样式并添加我自己的下拉箭头。就像我说的，在 WebKit 中很好，在 Firefox 中不是很好。显然，-moz-appearance: none没有摆脱下拉项目。
Any ideas? No, JavaScript is not an option
有任何想法吗？不，JavaScript 不是一种选择
采纳答案by Jordan Young
Okay, I know this question is old, but 2 years down the track and mozilla have done nothing.
好的，我知道这个问题很老，但是 2 年过去了，mozilla 什么也没做。
I've come up with a simple workaround.
我想出了一个简单的解决方法。
This essentially strips all formatting of the select box in firefox and wraps a span element around the select box with your custom style, but should only apply to firefox.
这基本上去除了 firefox 中选择框的所有格式，并使用您的自定义样式在选择框周围包裹了一个 span 元素，但应该只适用于 firefox。
Say this is your select menu:
假设这是您的选择菜单：
<select class='css-select'>
<option value='1'> First option </option>
<option value='2'> Second option </option>
</select>
And lets assume the css class 'css-select' is:
让我们假设 css 类 'css-select' 是：
.css-select {
background-image: url('images/select_arrow.gif');
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
}
In firefox, this would display with the select menu, followed by the ugly firefox select arrow, followed by your nice custom looking one. Not ideal.
在 Firefox 中，这将与选择菜单一起显示，然后是丑陋的 Firefox 选择箭头，然后是您漂亮的自定义外观。不理想。
Now to get this going in firefox, add a span element around with the class 'css-select-moz':
现在要在 Firefox 中执行此操作，请在类“css-select-moz”周围添加一个 span 元素：
<span class='css-select-moz'>
<select class='css-select'>
<option value='1'> First option </option>
<option value='2'> Second option </option>
</select>
</span>
Then fix the CSS to hide mozilla's dirty arrow with -moz-appearance:window and throw the custom arrow into the span's class 'css-select-moz', but only get it to display on mozilla, like this:
然后修复 CSS 以使用 -moz-appearance:window 隐藏 mozilla 的脏箭头并将自定义箭头扔到 span 的类“css-select-moz”中，但只让它在 mozilla 上显示，如下所示：
.css-select {
-moz-appearance:window;
background-image: url('images/select_arrow.gif');
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
}
@-moz-document url-prefix() {
.css-select-moz{
background-image: url('images/select_arrow.gif');
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
}
}
Pretty cool for only stumbling across this bug 3 hours ago (I'm new to webdesign and completely self-taught). However, this community has indirectly provided me with so much help, I thought it was about time I give something back.
3 小时前才偶然发现这个错误非常酷（我是网页设计的新手，完全自学）。然而，这个社区间接地给了我很多帮助，我想是时候回馈一下了。
I have only tested it in firefox (mac) version 18, and then 22 (after I updated).
我只在 firefox (mac) 18 版和 22 版（更新后）中对其进行了测试。
All feedback is welcome.
欢迎所有反馈。
回答by Jo?o Cunha
Update:this was fixed in Firefox v35. See the full gistfor details.
更新：此问题已在 Firefox v35 中修复。有关详细信息，请参阅完整要点。
Just figured out how to remove the select arrow from Firefox. The trick is to use a mix of -prefix-appearance, text-indentand text-overflow. It is pure CSS and requires no extra markup.
刚刚想出如何从 Firefox 中删除选择箭头。诀窍是混合使用-prefix-appearance,text-indent和text-overflow。它是纯 CSS，不需要额外的标记。
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
Tested on Windows 8, Ubuntu and Mac, latest versions of Firefox.
在 Windows 8、Ubuntu 和 Mac、最新版本的 Firefox 上测试。
Live example: http://jsfiddle.net/joaocunha/RUEbp/1/
实例：http: //jsfiddle.net/joaocunha/RUEbp/1/
More on the subject: https://gist.github.com/joaocunha/6273016
有关该主题的更多信息：https: //gist.github.com/joaocunha/6273016
回答by opengrid
The trick that works for me is to make select width more than 100% and apply overflow:hidden
对我有用的技巧是使选择宽度超过 100% 并应用溢出：隐藏
select {
overflow:hidden;
width: 120%;
}
This is the only way right now to hide dropdown arrow in FF.
这是目前在 FF 中隐藏下拉箭头的唯一方法。
BTW. if you want beautiful dropdowns use http://harvesthq.github.com/chosen/
顺便提一句。如果你想要漂亮的下拉菜单，请使用http://harvesthq.github.com/chosen/
回答by Danield
Important Update:
重要更新：
As of Firefox V35 the appearance property now works !!
从 Firefox V35 开始，外观属性现在可以使用了！！
From firefox's official release notes on V35:
Using
-moz-appearancewith thenonevalue on a combobox now remove the dropdown button (bug 649849).
使用
-moz-appearance与none上一个组合框的值现在删除的下拉按钮（缺陷649849）。
So now in order to hide the default arrow - it's as easy as adding the following rules on our select element:
所以现在为了隐藏默认箭头 - 就像在我们的 select 元素上添加以下规则一样简单：
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select {
margin: 50px;
border: 1px solid #111;
background: transparent;
width: 150px;
padding: 5px;
font-size: 16px;
border: 1px solid #ccc;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>回答by Shaun
We've found a simple and decent way to do this. It's cross-browser,degradable, and doesn't break a form post. First set the select box's opacityto 0.
我们找到了一种简单而体面的方法来做到这一点。它是跨浏览器的，可降解的，并且不会破坏表单帖子。首先将选择框设置opacity为0.
.select {
opacity : 0;
width: 200px;
height: 15px;
}
<select class='select'>
<option value='foo'>bar</option>
</select>
this is so you can still click on it
这样你仍然可以点击它
Then make div with the same dimensions as the select box. The div should lay under the select box as the background. Use { position: absolute }and z-indexto achieve this.
然后制作与选择框尺寸相同的 div。div 应该位于选择框下方作为背景。使用{ position: absolute }和z-index来实现这一点。
.div {
width: 200px;
height: 15px;
position: absolute;
z-index: 0;
}
<div class='.div'>{the text of the the current selection updated by javascript}</div>
<select class='select'>
<option value='foo'>bar</option>
</select>
Update the div's innerHTML with javascript. Easypeasy with jQuery:
使用 javascript 更新 div 的 innerHTML。Easypeasy 与 jQuery：
$('.select').click(function(event)) {
$('.div').html($('.select option:selected').val());
}
That's it! Just style your div instead of the select box. I haven't tested the above code so you'll probably need tweak it. But hopefully you get the gist.
就是这样！只需设置 div 的样式而不是选择框。我还没有测试上面的代码，所以你可能需要调整它。但希望你能明白要点。
I think this solution beats {-webkit-appearance: none;}. What browsers should do at the very most is dictate interaction with form elements, but definitely not how their initially displayed on the page as that breaks site design.
我认为这个解决方案胜过{-webkit-appearance: none;}。浏览器最应该做的是决定与表单元素的交互，但绝对不是它们最初在页面上的显示方式，因为这会破坏网站设计。
回答by ninja_corp
Try this way:
试试这个方法：
-webkit-appearance: button;
-moz-appearance: button;
Then, you can use a different image as background and place it:
然后，您可以使用不同的图像作为背景并将其放置：
background-image: url(images/select-arrow.png);
background-position: center right;
background-repeat: no-repeat;
There is another way for moz browsers:
moz浏览器还有另一种方式：
text-indent:10px;
If you have a defined a width to you select, this property will push the default dropbox button under the select area.
如果您选择了定义的宽度，则此属性将推送选择区域下的默认保管箱按钮。
It works for me! ;)
这个对我有用！;)
回答by Stuart Badminton
While not a complete solution I've found that…
虽然不是一个完整的解决方案，但我发现……
-moz-appearance: window;
…works to some extent. You can't change the background (-color or -image) but the element can be rendered invisible with color: transparent. Not perfect but it's a start and you don't need to replace the system level element with a js one.
...在某种程度上有效。您无法更改背景（-color 或 -image），但可以使用 color: transparent 将元素渲染为不可见。不完美，但这是一个开始，您不需要用 js 替换系统级元素。
回答by ferocesalatino
I think I found the solution compatible with FF31!!!
Here are two options that are well explained at this link:
http://www.currelis.com/hiding-select-arrow-firefox-30.html
I used option 1:
Rodrigo-Ludgero posted this fix on Github, including an online demo. I tested this demo on Firefox 31.0 and it appears to be working correctly. Tested on Chrome and IE as well. Here is the html code:
我想我找到了与 FF31 兼容的解决方案！！！
这里有两个选项在此链接中得到了很好的解释：
http
://www.currelis.com/hiding-select-arrow-firefox-30.html 我使用了选项 1：Rodrigo-Ludgero 在 Github 上发布了此修复程序，包括一个在线演示。我在 Firefox 31.0 上测试了这个演示，它似乎工作正常。也在 Chrome 和 IE 上进行了测试。这是html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Custom Select</title>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="custom-select fa-caret-down">
<select name="" id="">
<option value="">Custom Select</option>
<option value="">Custom Select</option>
<option value="">Custom Select</option>
</select>
</div>
</body>
</html>
and the css:
和CSS：
.custom-select {
background-color: #fff;
border: 1px solid #ccc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0 0 2em;
padding: 0;
position: relative;
width: 100%;
z-index: 1;
}
.custom-select:hover {
border-color: #999;
}
.custom-select:before {
color: #333;
display: block;
font-family: 'FontAwesome';
font-size: 1em;
height: 100%;
line-height: 2.5em;
padding: 0 0.625em;
position: absolute;
top: 0;
right: 0;
text-align: center;
width: 1em;
z-index: -1;
}
.custom-select select {
background-color: transparent;
border: 0 none;
box-shadow: none;
color: #333;
display: block;
font-size: 100%;
line-height: normal;
margin: 0;
padding: .5em;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.custom-select select::-ms-expand {
display: none; /* to ie 10 */
}
.custom-select select:focus {
outline: none;
}
/* little trick for custom select elements in mozilla firefox 17/06/2014 @rodrigoludgero */
:-moz-any(.custom-select):before {
background-color: #fff; /* this is necessary for overcome the caret default browser */
pointer-events: none;
z-index: 1; /* this is necessary for overcome the pseudo element */
}
http://jsbin.com/pozomu/4/edit
It works very good for me!
回答by Alex Moleiro
I am styling the select just likes this
我正在设计选择就像这样
<select style=" -moz-appearance: radio-container;
-webkit-appearance: none;
appearance: none;
">
It works for me in FF, Safari and Chrome in all versions I've tested.
它适用于我测试过的所有版本的 FF、Safari 和 Chrome。
In IE I put:
在 IE 中，我输入：
select::-ms-expand {
display: none;
}
/*to remove in all selects*/
Also you can: .yourclass::-ms-expand {display: none; } .yourid::-ms-exapan {display: none; }
你也可以： .yourclass::-ms-expand {display: none; } .yourid::-ms-exapan {显示：无；}
回答by RoToRa
Unfortunately for you this is"something fancy". Normally it's not the web authors place to redesign form elements. Many browsers purposely don't let you style them, in order for the user to see the OS controls they are used to.
对你来说不幸的是，这是“花哨的东西”。通常它不是网络作者重新设计表单元素的地方。许多浏览器故意不让您设置样式，以便用户看到他们习惯的操作系统控件。
The only way to do this consistently over browsers and operating systems, is use JavaScript and replace the selectelements with "DHTML" ones.
在浏览器和操作系统上始终如一地执行此操作的唯一方法是使用 JavaScript 并将select元素替换为“DHTML”元素。
Following article show three jQuery based plugins that allow you to do that (it is a bit old, but I couldn't find anything current right now)
下面的文章展示了三个基于 jQuery 的插件，可以让你做到这一点（它有点旧，但我现在找不到任何最新的东西）
http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements#1
http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements#1
