如何从Firefox中的select元素中删除箭头

我正在尝试使用CSS3devise一个select元素。 我在WebKit（Chrome / Safari）中获得了我期望的结果，但是Firefox并没有很好地发挥作用（我甚至不用IE来打扰）。 我正在使用CSS3 appearance属性，但出于某种原因，我无法将Firefox中的下拉图标甩掉。

以下是我正在做的一个例子： 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; } 

正如你所看到的，我并不想要任何幻想。 我只想删除默认的样式，并添加我自己的下拉箭头。 就像我说的，在WebKit中很棒，在Firefox中不是很棒。 显然， -moz-appearance: none没有摆脱掉下拉项目。

有任何想法吗？ 不，JavaScript不是一个选项

Answer 1

好吧，我知道这个问题已经很老了，但是2年的时间，mozilla没有做任何事情。

我想出了一个简单的解决方法。

这基本上剥离了Firefox中select框的所有格式，并用自定义样式在select框周围包围了一个span元素，但只能应用于firefox。

说这是你的select菜单：

 <select class='css-select'> <option value='1'> First option </option> <option value='2'> Second option </option> </select> 

让我们假设css类的“css-select”是：

 .css-select { background-image: url('images/select_arrow.gif'); background-repeat: no-repeat; background-position: right center; padding-right: 20px; } 

在Firefox中，这将显示与select菜单，其次是丑陋的Firefoxselect箭头，其次是你的漂亮的自定义看。 不理想。

现在要在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> 

然后修复CSS以隐藏mozilla的脏箭头-moz-appearance：window并将自定义箭头放到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; } } 

在3小时之前，这个bug已经很难了（我刚刚进入网页devise，完全自学）。 不过，这个社区间接地给了我很多帮助，我以为是时候回来了。

我只testing了它在Firefox（Mac）版本18，然后22（我更新后）。

所有的反馈是欢迎的。

Answer 2

更新：这是固定在Firefox v35。 详情请参阅完整要点 。

---

只是想出了如何从Firefox中删除select箭头 。 诀窍是使用-prefix-appearance ， text-indent和text-overflow 。 这是纯CSS，不需要额外的标记。

 select { -moz-appearance: none; text-indent: 0.01px; text-overflow: ''; } 

在Windows 8，Ubuntu和Mac上testing最新版本的Firefox。

现场示例： http : //jsfiddle.net/joaocunha/RUEbp/1/

更多关于这个问题： https ： //gist.github.com/joaocunha/6273016

Answer 3

对我来说这个技巧是使select宽度超过100％，并应用溢出：隐藏

 select { overflow:hidden; width: 120%; } 

这是隐藏FF中下拉箭头的唯一方法。

BTW。 如果你想美丽的下拉列表使用http://harvesthq.github.com/chosen/

Answer 4

重要更新：

从Firefox V35的外观属性现在工作！

从Firefox的官方发布说明V35 ：

在combobox上使用-moz-appearance和none值现在删除下拉button（错误649849）。

所以现在为了隐藏默认的箭头 – 就像在我们的select元素上添加下面的规则一样简单：

 select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } 

DEMO

 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> 

Answer 5

我们已经find了一个简单而体面的方式来做到这一点。 它是跨浏览器的，可降解的，不会打破表单发布。 首先将select框的opacity为0 。

 .select { opacity : 0; width: 200px; height: 15px; } <select class='select'> <option value='foo'>bar</option> </select> 

这是你仍然可以点击它

然后制作与select框相同尺寸的div。 div应该放在select框的背景下。 使用{ 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> 

用javascript更新div的innerHTML。 Easypeasy与jQuery：

 $('.select').click(function(event)) { $('.div').html($('.select option:selected').val()); } 

而已！ 只需样式您的div而不是select框。 我没有testing上面的代码，所以你可能需要调整它。 但希望你能得到这个主意。

我认为这个解决scheme胜过{-webkit-appearance: none;} 。 浏览器应该做的最多的是与表单元素的指定交互，但绝对不是它们最初在页面上显示的，因为这破坏了网站devise。

Answer 6

试试这个方法：

 -webkit-appearance: button; -moz-appearance: button; 

然后，您可以使用不同的图像作为背景，并将其放置：

 background-image: url(images/select-arrow.png); background-position: center right; background-repeat: no-repeat; 

moz浏览器还有另一种方法：

 text-indent:10px; 

如果您select了一个定义的宽度，则此属性将推动选定区域下的默认保存框button。

它适合我！ ;）

Answer 7

虽然不是一个完整的解决scheme，我发现…

 -moz-appearance: window; 

…在一定程度上起作用。 你不能改变背景（-color或者-image），但是元素可以用透明的颜色渲染。 不完美，但这是一个开始，你不需要用jsreplace系统级元素。

Answer 8

我想我find了与FF31兼容的解决scheme！
这里有两个选项，这个链接很好的解释：
http://www.currelis.com/hiding-select-arrow-firefox-30.html

我使用了选项1：Rodrigo-Ludgero在Github上发布了这个修复，包括一个在线演示。 我在Firefox 31.0上testing了这个演示，看起来工作正常。 在Chrome和IE上testing也是如此。 这里是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> 

和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

它对我很好！

Answer 9

不幸的是，对你来说，这是 “一些幻想”。 通常情况下，网页作者不是重新devise表单元素的地方。 许多浏览器故意不让你对它们进行样式devise，以便用户看到它们习惯的操作系统控制。

在浏览器和操作系统上一致的唯一方法是使用JavaScript，并用“DHTML”replaceselect元素。

下面的文章展示了三个基于jQuery的插件，可以让你做到这一点（这是有点旧，但我现在找不到任何东西）

http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements#1

Answer 10

 /* Try this in FF30+ Covers up the arrow, turns off the background */ /* still lets you style the border around the image and allows selection on the arrow */ @-moz-document url-prefix() { .yourClass select { text-overflow: ''; text-indent: -1px; -moz-appearance: none; background: none; } /*fix for popup in FF30 */ .yourClass:after { position: absolute; margin-left: -27px; height: 22px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; content: url('..http://img.dovov.comyourArrow.svg'); pointer-events: none; overflow: hidden; border-right: 1px solid #yourBorderColour; border-top: 1px solid #yourBorderColour; border-bottom: 1px solid #yourBorderColour; } } 

Answer 11

我正在devise的select只是喜欢这个

 <select style=" -moz-appearance: radio-container; -webkit-appearance: none; appearance: none; "> 

在我testing过的所有版本中，它都适用于FF，Safari和Chrome。

在IE中我把：

  select::-ms-expand { display: none; } /*to remove in all selects*/ 

你也可以：.yourclass :: – ms-expand {display：none; } .yourid :: – ms-exapan {display：none; }

Answer 12

我知道这个问题有点老，但是因为它在谷歌上，这是一个“新”的解决scheme：

appearance: normal似乎在Firefox中工作正常（现在版本5）。 但不是在Opera和IE8 / 9中

作为Opera和IE9的解决方法，我使用了:before伪select器:before创build一个新的白盒，并将其放在箭头之上。

不幸的是，在IE8中这是行不通的。 该框被正确渲染，但箭头只是伸出…： – /

使用select:before在Opera中正常工作，但不在IE中。 如果我看看开发人员工具，我发现它正确地阅读规则，然后忽略它们（它们被划掉了）。 所以我在实际的<select>周围使用<span class="selectwrap"> <select> 。

 select { -webkit-appearance: normal; -moz-appearance: normal; appearance: normal; } .selectwrap { position: relative; } .selectwrap:before { content: ""; height: 0; width: 0; border: .9em solid red; background-color: red; position: absolute; right: -.1em; z-index: 42; } 

你可能需要调整这一点，但这对我有用！

免责声明：我正在使用这个来获得一个表格的好看的硬拷贝，所以我不需要创build第二页。 我不是一个想要红色滚动条， <marquee>标签，以及whatnot的1337 haxx0r :-)请不要将过多的样式应用于表单，除非有很好的理由。

Answer 13

使用pointer-events属性。

这里的想法是在本地下拉箭头上覆盖一个元素（来创build我们自定义的元素），然后禁止它上面的指针事件。 [看这个post ]

这是一个工作FIDDLE使用这种方法。

另外，在这个答案中，我更详细地讨论了这个和另一个方法。

Answer 14

这工作（在Firefox 23.0.1testing）：

 select { -moz-appearance: radio-container; } 

Answer 15

build立在@JoãoCunha的答案上，一个CSS的风格，是有用的多一个浏览器

 select { /*for firefox*/ -moz-appearance: none; /*for chrome*/ -webkit-appearance:none; text-indent: 0.01px; text-overflow: ''; } /*for IE10*/ select::-ms-expand { display: none; } 

Answer 16

除了Joao Cunha的回答之外 ，这个问题现在在Mozilla的“待办事项列表”上 ，目标是35版。

对于那些渴望的人来说，在Cunha的博客中提到的托德·帕克（Todd Parker）的解决方法是今天起作用的：

http://jsfiddle.net/xvushd7x/

HTML：

 <label class="wrapper">This label wraps the select <div class="button custom-select ff-hack"> <select> <option>Apples</option> <option>Bananas</option> <option>Grapes</option> <option>Oranges</option> <option>A very long option name to test wrapping</option> </select> </div> </label> 

CSS：

 /* Label styles: style as needed */ label { display:block; margin-top:2em; font-size: 0.9em; color:#777; } /* Container used for styling the custom select, the buttom class below adds the bg gradient, corners, etc. */ .custom-select { position: relative; display:block; margin-top:0.5em; padding:0; } /* These are the "theme" styles for our button applied via separate button class, style as you like */ .button { border: 1px solid #bbb; border-radius: .3em; box-shadow: 0 1px 0 1px rgba(0,0,0,.04); background: #f3f3f3; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */ } /* This is the native select, we're making everything but the text invisible so we can see the button styles in the wrapper */ .custom-select select { width:100%; margin:0; background:none; border: 1px solid transparent; outline: none; /* Prefixed box-sizing rules necessary for older browsers */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /* Remove select styling */ appearance: none; -webkit-appearance: none; /* Font size must the 16px or larger to prevent iOS page zoom on focus */ font-size:16px; /* General select styles: change as needed */ font-family: helvetica, sans-serif; font-weight: bold; color: #444; padding: .6em 1.9em .5em .8em; line-height:1.3; } /* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select. Note this si a 2x image so it will look bad in browsers that don't support background-size. In production, you'd handle this resolution switch via media query but this is a demo. */ .custom-select::after { content: ""; position: absolute; width: 9px; height: 8px; top: 50%; right: 1em; margin-top:-4px; background-image: url(http://filamentgroup.com/files/select-arrow.png); background-repeat: no-repeat; background-size: 100%; z-index: 2; /* These hacks make the select behind the arrow clickable in some browsers */ pointer-events:none; } /* Hover style */ .custom-select:hover { border:1px solid #888; } /* Focus style */ .custom-select select:focus { outline:none; box-shadow: 0 0 1px 3px rgba(180,222,250, 1); background-color:transparent; color: #222; border:1px solid #aaa; } /* Set options to normal weight */ .custom-select option { font-weight:normal; } 

Answer 17

由于您已经在代码中编写的Firefox 35，“- -moz-appearance:none ”，最后根据需要删除箭头button。

这是自该版本以来解决的一个错误 。

Answer 18

很多讨论发生在这里和那里，但我没有看到这个问题的一些适当的解决scheme。 最后通过在IE和Firefox上编写一个小的Jquery + CSS代码来完成这个HACK。

使用Jquery计算元素宽度（SELECT元素）。 添加一个围绕select元素的包装和保持这个元素的溢出隐藏。 确保这个包装的宽度是appox。 与SELECT元素相差25px。 这可以很容易地用JQuery来完成。 所以现在我们的图标已经走了！ 现在是在SELECT元素上添加图像图标的时候了！ 只需添加几条简单的线条添加背景，你都完成了！ 确保使用隐藏的外层包装，

这里是Drupal完成的代码示例。 但是，也可以通过删除Drupal Specific的几行代码来使用它们。

 /* * Jquery Code for Removing Dropdown Arrow. * @by: North Web Studio */ (function($) { Drupal.behaviors.nwsJS = { attach: function(context, settings) { $('.form-select').once('nws-arrow', function() { $wrap_width = $(this).outerWidth(); $element_width = $wrap_width + 20; $(this).css('width', $element_width); $(this).wrap('<div class="nws-select"></div>'); $(this).parent('.nws-select').css('width', $wrap_width); }); } }; })(jQuery); 

 /* * CSS Code for Removing Dropdown Arrow. * @by: North Web Studio */ .nws-select { border: 1px solid #ccc; overflow: hidden; background: url('..http://img.dovov.comicon.png') no-repeat 95% 50%; } .nws-select .form-select { border: none; background: transparent; } 

解决scheme适用于所有浏览器IE浏览器，Chrome浏览器和Firefox无需添加固定宽度使用CSS黑客入侵。 这一切正在使用JQuerydynamic处理。

更多描述在： – http://northwebstudio.com/blogs/1/jquery/remove-drop-down-arrow-html-select-element-using-jquery-and-css

Answer 19

CSS3的appearance属性不允许有none值。 看看W3C的参考 。 所以，你试图做的是无效的（实际上铬也不应该接受）。

不幸的是，我们真的没有任何跨浏览器的解决scheme来隐藏使用纯CSS的箭头。 正如指出的，你将需要JavaScript。

我build议你考虑使用selectBox jQuery插件 。 这是非常轻量级，很好地完成。

Answer 20

您可以增加框的宽度，并将箭头更靠近箭头的左侧。 这然后允许你用一个空的白色div覆盖箭头。

看看： http : //jsbin.com/aniyu4/86/edit

Answer 21

你会接受微小的变化的HTML？

就像放一个包含select标签的div标签一样。

看一看。

Answer 22

或者，您可以剪辑select。 有些东西是：

 select { width:200px; position:absolute; clip:rect(0, 170px, 50px, 0); } 

这应该剪辑select框的右侧30px，剥去箭头。 现在提供一个170px的背景图像和瞧，风格select

Answer 23

这是一个巨大的黑客，但-moz-appearance: menulist-text可能会做的伎俩。

Answer 24

我有同样的问题。 在FF和Chrome上运行起来很容易，但是在IE（我们需要支持的8+）上，事情变得复杂起来。 我可以find自定义select元素的最简单的解决scheme，包括IE8，“我在任何地方尝试”，使用.customSelect（）

Answer 25

对我来说有用的黑客是将（select）显示设置为inline-flex 。 将箭头从我的selectbutton中删除。 没有所有的附加代码。

• 仅限于Fx。 Chrome浏览器仍然需要-webkit appearance …

Answer 26

乔丹杨的答案是最好的。 但是，如果你不能或不想改变你的HTML，你可能会考虑只是删除向Chrome浏览器，Safari等提供的自定义向下箭头，离开Firefox的默认箭头 – 但没有双箭头结果。 不理想，但一个很好的快速修复，不添加任何HTML，并不会危害您在其他浏览器中的自定义外观。

 <select> <option value='1'> First option </option> <option value='2'> Second option </option> </select> 

CSS：

 select { background-image: url('images/select_arrow.gif'); background-repeat: no-repeat; background-position: right center; padding-right: 20px; } @-moz-document url-prefix() { select { background-image: none; } } 

Answer 27

hackity hack …一个适用于我testing过的每个浏览器（Safari，Firefox，Chrome）的解决scheme。 没有任何IE浏览器，所以如果你可以testing和评论，那将会很好。

 <div class="wrapper"> <select> <option>123456789</option> <option>234567890</option> </select> </div> 

CSS，带有url编码的图片：

 .wrapper { position:relative; width:200px; } .wrapper:after { content:""; display: block; position: absolute; top:1px; height:28px; right:1px; width:16px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAcCAYAAACH81QkAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4o7anbAAAAjklEQVR42uzUsQ3EIAwFUPty7MBOsAoVC7EVYgyUSFcdzn0iJYquAZGSLxnLzatsWERWGsvGP0QGkc+LxvN9AqGJTKQJMcYQM/+VtbZdiTGKUgr3cxbmlJI0ZiW83vsbgrkjB5JzFq11BdAxdyNICKEi6J25kFKKOOdq70We+JS2ufYTacjyxrKMLtsuwAAznzqGLHX9BwAAAABJRU5ErkJggg==); pointer-events: none; } select { width: 100%; padding:3px; margin: 0; border-radius: 0; border:1px solid black; outline:none; display: inline-block; -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; float:none!important; background:white; font-size:13px; line-height: 1em; height: 30px; padding:6px 20px 6px 10px; } 

http://codepen.io/anon/pen/myPEBy

我使用：after-element来覆盖丑陋的箭头。 由于select不支持：之后，我需要一个包装工作。 现在，如果你点击箭头，下拉菜单不会注册它，除非你的浏览器支持pointer-events: none ，除了IE10之外，其他人都可以： http ://caniuse.com/#feat=pointer- 事件

所以对我来说，这是完美的 – 一个不错的，干净的，低头痛的解决scheme，至less与包括JavaScript的所有其他选项相比。

TL;博士：

如果IE10（或更低）用户单击箭头，它将无法正常工作。 对我来说足够好

Answer 28

如果你不介意JS的摆弄，我写了一个小的jQuery插件，可以帮助你做到这一点。 有了它，你不必担心供应商的前缀。

  $.fn.magicSelectBox = function() { var $e = this; $e.each(function() { var $select = $(this); var $magicbox = $('<div></div>').attr('class', $select.attr('class')).attr('style', $select.attr('style')).addClass('magicbox'); var $innermagicbox = $('<div></div>').css({ position: 'relative', height: '100%' }); var $text = $('<span></span>').css({ position: 'absolute' }).text($select.find("option:selected").text()); $select.attr('class', null).css({ width: '100%', height: '100%', opacity: 0, position: 'absolute' }).on('change', function() { $text.text($select.find("option:selected").text()); }); $select.parent().append($magicbox); $innermagicbox.append($text, $select); $magicbox.append($innermagicbox); }); return $e; }; 

小提琴在这里： JS小提琴

条件是你必须从头开始select样式（这意味着设置背景和边框），但是你可能想要这样做。

另外，由于该函数将原始selectreplace为一个div，因此您将在CSS中的selectselect器上直接丢失任何样式。 所以给select元素一个类和风格的类。

Supports most modern browsers, if you want to target older browsers, you can try an older version of jQuery, but perhaps have to replace on() with bind() in the function (not tested)

Answer 29

try this css

 select { /*for firefox*/ -moz-appearance: none; /*for chrome*/ -webkit-appearance:none; } 

Its working

Answer 30

The other answers didn't seem to work for me, but I found this hack. This worked for me (July 2014)

 select { -moz-appearance: textfield !important; } 

In my case, I also had a woocommerce input field so I used this

 .woocommerce .quantity input.qty { -moz-appearance: textfield !important; } 

Updated my answer to show select rather than input