在Firefox浏览器中删除默认选择框箭头

Question

我需要在火狐浏览器中去除默认的下拉框箭头

我使用了以下代码：

-webkit-appearance: none;
-moz-appearance:none; 
background: rgba(0,0,0,0);

它在Chrome中工作良好，但在Firefox中不起作用。

- manoranjani.a

Answer 1

更新：这个问题在Firefox v35中已经修复。有关详细信息，请参见完整的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

- João Cunha

---

然而，它留下了箭头的空间... 有什么方法可以消除它吗？ - simPod

暂时还没有。请查看我发布的gist，它会给你完整的情况说明。https://gist.github.com/joaocunha/6273016 - João Cunha

Answer 2

处理这个问题可以采取以下方式： 1）您的HTML可能如下所示：

<div class="select-box">
    <select>
        <option>Mozilla Firefox</option>
        <option>Google Chrome</option>
        <option>Apple Safari</option>
        <option>Internet Explorer</option>
    </select>
</div>

你的CSS应该像这样：

2）

.select-box select{width:100%}
/* For Microsoft IE */
select::-ms-expand {    display: none; }

/* For Webkit based browsers Google Chrome, Apple Safari and latest Gecko browsers */
select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

试一下。希望这能帮到你。适用于最新版本的 Firefox、Chrome、IE 和 Safari，如果不是所有版本的话。但请在所有浏览器的所有版本上进行检查。

- Vineet 'DEVIN' Dev

Answer 3

我认为在Firefox中没有简单的方法来做到这一点，特别是对于Linux和Mac OS版本。 将选择框的不透明度更改为0，然后使用div/span来包含选择框。之后，在该容器上添加一些样式。这是一个不推荐的解决方法，如果我们只想更改选择框的样式，它的成本太高了。但是，它无论如何都解决了问题。希望这可以帮助到你。=)

原文：

<select>
    <option>Value 1</option>
    <option>Value 2</option>
</select>

新的：

<span class="select-container">
    <select>
        <option>Value 1</option>
        <option>Value 2</option>
    </select>
</span>

风格：

.select-container {
    width: 100px;
    height: 30px;
    position: relative;
    border: 1px solid #ccc;
    background: url("path of the arrow image") no-repeat right center;
    background-size: 25px;
}
select {
    position: absolute;
    opacity: 0;
    outline: 0;
}

然后，添加一些Javascript代码以在容器中显示所选的值。

- Shaun

Answer 4

如何在Chrome和Mozilla中简单地去除下拉箭头

与选择相关的。

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

/*for IE10*/
select::-ms-expand {
    display: none;
}

<select>
 <option>India</option >
 <option>India</option >
 <option>India</option >    
</select>

- Sangeet Shah

Answer 5

    $(document).ready(function(){
        $(".selsect_class").each(function(){
            $(this).after("<span class='select_holder'></span>");
        });
        $(".selsect_class").change(function(){
            var selectedOption = $(this).find(":selected").text();
            $(this).next(".select_holder").text(selectedOption);
        }).trigger('change');
    })

.selsect_id{
  background: url("http://a1lrsrealtyservices.com/demo/ot-select.png") no-repeat scroll right center #fff;
  border: 1px solid #ccc;
  border-radius: 2px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05) inset;
  box-sizing: border-box;
  display: block;
  font-size: 12px;
  height: 29px;
  margin: 0 5px 5px 0;
  width: 100%;
 }
 .selsect_class{
  cursor: pointer;
  font-size: 14px;
  height: 29px;
  opacity: 0;
  position: relative;
  width: inherit;
  z-index: 4;
 }
 .selsect_class option{padding: 3px 15px;}
 .select_holder{position: absolute;left: 30px;top: 5px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selsect_id">
 <select class="selsect_class">
  <option value="">- Choose One -</option>
  <option value="1">jillur</option>
  <option value="2">korim</option>
  <option value="3">rohim</option>
  <option value="4">Uncategorized</option>
 </select>
</div>

预览图片

- asiancoders

---

你应该在回答中包含关于如何以及为什么解决问题的说明/信息。在StackOverflow上，仅有代码的答案是不被赞同的。 - Cindy Meister

Answer 6

gcyrillus 在此网站上提出了一个简洁的解决方案。

http://css-tricks.com/forums/topic/remove-select-arrow-for-chrome-and-firefox/

- Rochadsouza