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

Question

我正在尝试使用CSS3设置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

更新： 这已在Firefox v35中修复。有关详细信息，请参阅full gist。

---

刚想出如何从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

Answer 2

好吧，我知道这个问题已经过时了，但距离赛道还有2年，而且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（在我更新后）测试了它。

欢迎所有反馈。

Answer 3

对我有用的诀窍是 选择宽度超过100％并应用overflow：hidden

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

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

顺便说一句。如果你想要美丽的下拉菜单，请使用http://harvesthq.github.com/chosen/

Answer 4

重要更新：

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

来自firefox's official release notes on V35：

  

现在删除在组合框上使用-moz-appearance none值的select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }   下拉按钮（错误649849）。

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

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

DEMO

＆＃13;

＆＃13;

<select>
  <option>Apples</option>
  <option selected>Pineapples</option>
  <option>Chocklate</option>
  <option>Pancakes</option>
</select>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

Answer 5

我们找到了一种简单而体面的方法。它是跨浏览器，可降级的，并且不会破坏表单帖子。首先将选择框的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轻松实现：

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

就是这样！只需设置div而不是选择框。我没有测试上面的代码，所以你可能需要调整它。但希望你能得到主旨。

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

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;

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

对我有用！ ;）

Answer 7

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

-moz-appearance: window;

......在某种程度上有效。您无法更改背景（-color或-image），但可以使用color：transparent呈现元素不可见。不完美但它是一个开始，你不需要用js替换系统级元素。

Answer 8

我想我发现解决方案与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

它对我很有用！

Answer 9

我正在设计选择就像这样

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

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

Answer 11

不幸的是，是“有点奇怪”。通常情况下，网络作者不会重新设计表单元素。许多浏览器故意不让您对它们进行样式化，以便用户可以查看它们习惯的OS控件。

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

以下文章展示了三个基于jQuery的插件，允许你这样做（它有点旧，但我现在找不到任何东西）

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

Answer 12

建立@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 13

试试这个css

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

它的工作

Answer 14

自Firefox 35以来，＆＃34; -moz-appearance:none＆＃34;您已在代码中编写，最后根据需要删除箭头按钮。

自那个版本以来，它已经解决了bug。

Answer 15

继Joao Cunha's answer之后，此问题现在为on Mozilla's ToDo List，并针对第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;
}

Answer 16

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

使用Jquery计算元素宽度（SELECT元素）。 在Select元素周围添加包装并为此元素隐藏溢出。确保此包装器的宽度为appox。比SELECT Element低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('../images/icon.png') no-repeat 95% 50%;
}
.nws-select .form-select {
  border: none;
  background: transparent;
}

解决方案适用于所有浏览器IE，Chrome和＆amp;火狐 无需使用CSS添加固定宽度黑客。所有这些都是使用JQuery动态处理的。！

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

Answer 17

这适用（在Firefox 23.0.1上测试）：

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

Answer 18

使用pointer-events属性。

这里的想法是在原生下拉箭头上覆盖一个元素（以创建我们的自定义箭头），然后禁止在其上的指针事件。 [见this post]

以下是使用此方法的 FIDDLE 。

此外，在this SO answer中，我更详细地讨论了这个和另一种方法。

Answer 19

我知道这个问题有点陈旧，但是因为它出现在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;
}

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

<强>声明： 我正在使用它来获得带有表单的网页的漂亮硬拷贝，所以我不需要创建第二页。我不是一个1337 haxx0r谁想要红色滚动条，<marquee>标签，以及诸如此类:-)请不要将过多的样式应用于表单，除非你有充分的理由。

Answer 20

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

• 仅限Fx。 Chrome等等仍然需要-webkit appearance ...

Answer 21

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

Answer 22

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

Answer 23

或者，您可以剪辑选择。有点像：

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

这应该剪掉选择框右侧的30px，剥去箭头。现在提供一个170px的背景图像和voila，样式选择

Answer 24

Jordan Young的答案是最好的。但是，如果您不能或不想更改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 25

hackity hack ...这个解决方案适用于我测试的每个浏览器（Safari，Firefox，Chrome）。没有任何IE浏览器，所以如果你可以测试和评论会很好：

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

CSS，使用网址编码的图片：

.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不支持：之后，我需要一个包装器来使用。 现在，如果您点击箭头，下拉列表将不会注册...除非您的浏览器支持pointer-events: none，除IE10之外的所有人都支持http://caniuse.com/#feat=pointer-events

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

<强> TL; DR：

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

Answer 26

你会接受对html的微小更改吗？

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

Take a look.

Answer 27

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

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

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 Fiddle

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

此外，由于函数用div替换原始选择，因此您将失去直接在CSS中的选择选择器上完成的任何样式。所以给select元素一个类并设置类的样式。

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

Answer 29

CSS3中的appearance属性不允许none值。看看the W3C reference。所以，你要做的事情是无效的（事实上Chrome也不应该接受）。

然后不幸的是，我们真的没有任何跨浏览器的解决方案来隐藏使用纯CSS的箭头。如上所述，您将需要JavaScript。

我建议您考虑使用selectBox jQuery plugin。它非常轻巧，做得很好。

Answer 30

其他答案对我来说似乎不起作用，但我发现了这个黑客。 这对我有用（2014年7月）

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

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

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

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