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

我正在尝试select使用CSS3设置元素的样式。我在WebKit（Chrome / Safari）中获得了想要的结果，但是Firefox的运行效果不佳（我什至不担心IE）。我正在使用CSS3appearance属性，但是由于某些原因，我无法从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不是一种选择

好的，我知道这个问题很旧，但是两年之后，mozilla却什么也没做。

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

这实际上会剥离firefox中选择框的所有格式，并使用自定义样式在选择框周围包裹一个span元素，但应仅适用于firefox。

说这是您的选择菜单：

<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中，这将与选择菜单一起显示，然后是难看的firefox选择箭头，然后是外观漂亮的自定义箭头。不理想。

现在，要在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以使用-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;
  }
} 

挺酷的，只在3小时前遇到了这个错误（我是网页设计的新手，完全是自学成才的）。但是，这个社区间接地为我提供了很多帮助，我认为是时候该回馈我了。

我只在firefox（mac）版本18和22（更新后）中对其进行了测试。

欢迎所有反馈。

更新：在Firefox v35中已修复。有关详细信息，请参见完整要点。

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

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

在Windows 8，Ubuntu和Mac（最新版本的Firefox）上进行了测试。

实时示例：http：//jsfiddle.net/joaocunha/RUEbp/1/

有关此主题的更多信息：https : //gist.github.com/joaocunha/6273016

对我有用的技巧是使选择宽度大于100％并应用溢出：隐藏

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

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

顺便说一句。如果您想获得漂亮的下拉菜单，请使用http://harvesthq.github.com/chosen/

重要更新：

从Firefox V35开始，外观属性现在可用！

从firefox在V35上的正式发行说明中：

使用-moz-appearance与none上一个组合框的值现在删除的下拉按钮（缺陷649849）。

现在，为了隐藏默认箭头，就像在我们的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>

我们找到了一种简单而又体面的方法来做到这一点。它是跨浏览器的，可降解的，并且不会破坏表单发布。首先将选择框设置opacity为0。

.select { 
    opacity : 0;
    width: 200px;
    height: 15px;
}

<select class='select'>
    <option value='foo'>bar</option>    
</select>

因此，您仍然可以单击它

然后使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>

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

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

而已！只需为div设置样式，而不是选择框即可。我尚未测试以上代码，因此您可能需要对其进行调整。但希望您能掌握要点。

我认为这种解决方案胜过{-webkit-appearance: none;}。浏览器最多应该执行的操作是与表单元素进行交互，但绝不决定它们最初如何显示在页面上，因为这会破坏网站设计。

尝试这种方式：

-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;

如果定义了宽度，此属性将在选择区域下按下默认的保管箱按钮。

这个对我有用！;）

虽然不是完整的解决方案，但我发现……

-moz-appearance: window;

…在某种程度上起作用。您无法更改背景（-color或-image），但可以使用以下颜色将元素渲染为不可见：透明。虽然不完美，但这只是一个开始，您不需要用js替换系统级元素。

我想我找到了与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>

和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

对我来说很好！

对您来说不幸的是，这很“奇特”。通常，Web设计人员不是重新设计表单元素的地方。许多浏览器故意不允许您设置其样式，以使用户看到他们习惯的OS控件。

在浏览器和操作系统上一致地执行此操作的唯一方法是使用JavaScript并将select元素替换为“ DHTML”元素。

下一篇文章显示了三个基于jQuery的插件，可以让您做到这一点（虽然有点旧，但我现在找不到最新的东西）

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

/* 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('../images/yourArrow.svg');
        pointer-events: none;
        overflow: hidden;
        border-right: 1px solid #yourBorderColour;
        border-top: 1px solid #yourBorderColour;
        border-bottom: 1px solid #yourBorderColour; 
    }
}

我喜欢这样的选择

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

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

在IE中，我输入：

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

您还可以：.yourclass ::-ms-expand {display：none; } .yourid ::-ms-exapan {display：none; }

我知道这个问题有点老了，但是由于它出现在Google上，所以这是一个“新”解决方案：

appearance: normal对于我来说，似乎在Firefox中工作正常（现在是第5版）。但不适用于Opera和IE8 / 9

作为Opera和IE9的一种解决方法，我使用了:before伪选择器来创建一个新的白框，并将其放在箭头上方。

不幸的是，在IE8中这是行不通的。该框已正确呈现，但是箭头仍然伸出来...：-/

使用select:before可以在Opera中正常工作，但不能在IE中工作。如果我查看开发人员工具，就会发现它正在正确阅读规则，然后忽略它们（它们被划掉了）。所以我用一个<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;
}

您可能需要稍微调整一下，但这对我有用！

免责声明： 我正在使用它来获取带有表单的网页的美观印刷版，因此不需要创建第二页。我不是要使用红色滚动条，<marquee>标签和其他工具的1337 haxx0r ：-)除非您有充分的理由，否则请不要对表单应用过多的样式。

使用该pointer-events属性。

这里的想法是在本地下拉箭头上覆盖一个元素（以创建我们的自定义箭头），然后在其上禁止指针事件。[请参阅这篇文章]

这是使用此方法的有效FIDDLE。

同样，在这个SO答案中，我更详细地讨论了此方法和另一种方法。

这有效（在Firefox 23.0.1上测试）：

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

以@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;
}

除了Joao Cunha的回答，此问题现在已列在Mozilla的“待办事项列表”中，并针对35版。

对于那些想要的人，这是Todd Parker的变通方法，在Cunha的博客上引用了该变通方法，该变通方法现在可以使用：

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;
}

从Firefox 35开始，-moz-appearance:none您已经在代码中编写了“ ”，最后根据需要删除箭头按钮。

自该版本以来，这已解决了一个错误。

在这里和那里都发生了很多讨论，但是我没有找到解决此问题的适当方法。最后，通过编写一个小的Jquery + CSS代码在IE和Firefox上执行此HACK结束。

使用Jquery计算元素宽度（SELECT元素）。在“选择”元素周围添加包装器，并保持该元素的溢出隐藏。确保此包装器的宽度是适当的。比SELECT元素小25px。这可以通过Jquery轻松完成。所以现在我们的图标消失了！现在是时候在SELECT元素上添加我们的图像图标了！！！！只需添加几行简单的行即可添加背景，您都完成了！！！确保对外部包装使用隐藏的溢出，

这是为Drupal完成的代码示例。但是，也可以通过删除几行特定于Drupal的代码来用于其他人。

/*
 * 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('../images/icon.png') no-repeat 95% 50%;
}
.nws-select .form-select {
  border: none;
  background: transparent;
}

该解决方案适用于所有浏览器IE，Chrome和Firefox，无需使用CSS添加固定宽度的Hacks。所有这些都使用JQuery动态处理。

更多说明：-http : //northwebstudio.com/blogs/1/jquery/remove-drop-down-arrow-html-select-element-using-jquery-and-css

试试这个CSS

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

它的工作

appearanceCSS3中的属性不允许none值。看一下W3C参考。因此，您尝试执行的操作无效（实际上，Chrome也不应接受）。

不幸的是，我们确实没有任何跨浏览器解决方案可以使用纯CSS隐藏该箭头。如前所述，您将需要JavaScript。

我建议您考虑使用selectBox jQuery插件。它非常轻巧并且做得很好。

您可以增加框的宽度，然后将箭头移到箭头的左侧。然后，您可以使用空白的div覆盖箭头。

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

您会接受对HTML的细微更改吗？

类似于放置包含select标签的div标签。

看一看。

或者，您可以裁剪选择。类似于以下内容：

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

这应该剪切选择框右侧的30px，去掉箭头。现在提供170像素的背景图片和瞧，样式选择

这是一个巨大的hack，但-moz-appearance: menulist-text可能会成功。

我有同样的问题。使它在FF和Chrome上运行很容易，但是在IE（我们需要支持的8+）上，事情变得很复杂。我可以找到适用于“我尝试过的所有地方”（包括IE8 ）的自定义选择元素的最简单解决方案，就是使用.customSelect（）

对我来说有用的技巧是将（选择）显示设置为inline-flex。将箭头右移出我的选择按钮。没有所有添加的代码。

• 仅适用于Fx。-webkit appearanceChrome等仍需要...

乔丹·扬的答案是最好的。但是，如果您不能或不想更改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;
  }
}

hacky hack ...一种解决方案，可在我测试过的每种浏览器（Safari，Firefox，Chrome）中使用。没有任何IE，所以如果您可以测试和评论，那就太好了：

<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+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowODgwMTE3NDA3MjA2ODExOEE2RENENTU2MTFGMEQ1RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGNDE5NDQ3Nzc5ODIxMUU0OEU0M0JFMzgzMkUxOTk3MiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGNDE5NDQ3Njc5ODIxMUU0OEU0M0JFMzgzMkUxOTk3MiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDk4MDExNzQwNzIwNjgxMThBNkRDRDU1NjExRjBENUQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDg4MDExNzQwNzIwNjgxMThBNkRDRDU1NjExRjBENUQiLz4gPC9yZGY6RGVzY3JpcHRpb24+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不支持：after，因此我需要一个包装器来使用。现在，如果您单击箭头，则该下拉列表将不会注册...除非您的浏览器支持pointer-events: none，除IE10-以外的每个人都支持： http

所以对我来说，它是完美的-一个不错的，干净的，低头痛的解决方案，至少与包括javascript在内的所有其他选项相比。

tl; dr：

如果IE10（或更低版本）用户单击箭头，它将无法使用。对我来说足够好...

如果您不介意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小提琴

条件是您必须从头开始对选择进行样式设置（这意味着设置背景和边框），但是无论如何您可能都想这样做。

同样，由于该函数用div代替了原始的select，因此您将直接在CSS的select选择器上丢失任何样式。因此，为select元素提供一个类并为该类设置样式。

支持大多数现代浏览器，如果要针对较旧的浏览器，则可以尝试使用较旧版本的jQuery，但可能必须在函数中用bind（）替换on（）（未经测试）

其他答案似乎对我不起作用，但是我发现了这个问题。这对我有用（2014年7月）

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

就我而言，我也有一个woocommerce输入字段，所以我使用了

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

更新了我的答案以显示选择而不是输入