【问题标题】：Firefox 30 is not hiding select box arrows anymoreFirefox 30 不再隐藏选择框箭头
【发布时间】：2014-07-18 05:30:57
【问题描述】：

我一直在使用“诡计”：

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

在 FF 上做自定义选择框，但由于版本 30 发布，这完全停止工作。我试图找出这是否已被弃用但找不到任何东西。是否有解决方法或其他方法来替换它？

【问题讨论】：

我认为您不应该依赖特定于供应商的定义。那么其他浏览器呢？如果你想为选择设置样式，也许像 Select2 这样的 jQuery 插件就可以了？
在其他浏览器上运行良好，在 FF 上也运行良好，直到版本 30
@AndyM 这显然被改变了，被弃用了。我的问题是，如果有人知道现在应该用什么来代替它
我要调查一下。我认为这可能与将箭头与填充分离的错误有关，这听起来很奇怪。等我弄明白了，我会发布更新。
Duplicate

标签： html css firefox

【解决方案1】：

是的！很好！谢谢

JS FIDDLE

.customSelect {
    font-size: inherit;
    margin: 0;
    padding: 0.5em;
    background-color: transparent;
    color: #393939;
    opacity:1;
    -moz-appearance: none;
    border: 0 none;
    border-radius: 0px;
    border:1px solid #B1B2B3;
    padding-right: 2.5em;
}

【讨论】：

【解决方案2】：

更新

自 2015 年 1 月起，这在 Firefox 35 版本中再次起作用。有关历史参考，请参阅下面的答案。

背景

使用的hack是这样的：

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

在我的测试中，在 FF 29 上，-moz-appearance:none; 没有任何影响。导致箭头框没有出现的是后两行。它说任何溢出都将被一个空字符串替换，然后它使用 text-indent 导致select 溢出。由于箭头框呈现为单个元素，类似于单个字母，这导致它被空字符串替换。

发生了什么

Mozilla 有人注意到，如果您在下拉列表select 上有填充，箭头不会改变大小。 According to the bug report，此问题现已修复：

问题在于这使箭头脱离了正常的 CSS 规则。我试过padding、text-indent、margin、white-space、text-wrap 等等，但我找不到任何会影响它的东西。 Elsewhere aroundthe internet，不幸的是，人们都在说同样的话。

现在怎么办

我们有几个选择。您可以使用叠加层与 pointer-events:none 结合来设置您想要的下拉菜单样式：Tutorial
您可以创建一个完全独立的下拉列表来替换 select，使用 Javascript：Tutorial

我们也可以观看request on Firefox's Bugzilla，并希望有一天他们会创建一种非hacky 的方式来做到这一点。 请注意：不要去那里发布关于想要它的 cmets。它被推迟的部分原因是人们大发雷霆。 vote for the issue 可能会有所帮助。

2014 年 9 月更新

现在是 actively worked on 用于 Firefox。 2个补丁已经提交，等待审核一周了。最有可能的情况是它进入了 FF35 Aurora，我们有几周的时间在截止日期之前对其进行审核和批准（Firefox 的发布时间为 6 周）。它也可能会延迟，甚至理论上可以“升级”，这意味着在当前的 Aurora 和 Beta 版本中进行了修补，以便更快地发布。

2014 年 10 月更新

这就是officially resolved！的种类。允许用户隐藏下拉箭头元素的补丁已提交，并将于 2015 年 1 月随 Firefox 35 一起发布。

这将只允许用户隐藏箭头。样式是另一个问题，已拆分为another bug ticket，将来会考虑。

2015 年 1 月更新

此问题现已修复！ Firefox 35 于 1 月 13 日发布，您现在可以使用 -moz-appearance:none 删除箭头。

【讨论】：

感谢您提供如此详细的答案，安迪，我会看看它并尝试您建议的解决方案。你看到那个错误的日期了吗？我知道人们要求修复很长一段时间。谢谢！
很高兴我能帮上忙。您还有什么想知道的我可以解决的吗？
嗨@AndyM 再次感谢您的出色回答，我已经完成了但在这两种情况下都必须重写选择结构（添加类，在之前和之后添加标记等）。他们取消的选项是使用常规选择元素。我会将您的答案设置为正确的，因为它是正确的，因为您付出的努力在我的情况下不起作用，只是因为表单结构是从插件中提取的，我无法编辑元素。当我有时间时，我会用 jquery 添加标记和育儿标签。再次感谢。
当你说这两种情况时，你的意思是我在“现在做什么”下建议的两个选项？如果您有兴趣，我可以帮助您让其中任何一个工作。很大程度上取决于您希望在多远的时候支持浏览器。
@AndyM 明天发布 - 准备好更新您的答案！ developer.mozilla.org/en-US/Firefox/Releases/35

【解决方案3】：

一种选择是使用overflow: hidden 将select 元素包装在容器元素中。增加select 元素的宽度以将向下箭头向右推到图片之外。然后为与select 元素匹配的容器元素添加边框。

.select-container {
    overflow: hidden;
    display: inline-block;
    height: 33px;
    border-right: 1px solid #B3B6BD;
}

.select-container select {
    width: 113%;
}

问题是这会影响在focus 上设置的样式或验证错误，这就是为什么我最终按照totas 的建议并用伪元素覆盖箭头。

【讨论】：

【解决方案4】：

我通过为 div 提供一些样式并单独选择来解决了这个问题。

任何人都可以根据需要更改他的宽度和其他样式属性。 :)

这里是它的 js fiddle。 JSFIDDLE 在所有浏览器上测试。

select::-ms-expand 用于 IE，-webkit-user-select: none 用于 chrome。

 <div  class="common-dropdown-small-div" style="width: 220px">
    <select id="select" class="common-dropdown-project-select">
        <option>
            apple
        </option>
        <option>
            blackberry
        </option>
        <option>
           pumpkin
        </option>
    </select>
</div>
.common-dropdown-small-div{
  border: 1px solid rgb(208, 208, 208);
  border-radius: 5px !important;
  overflow: hidden; 
}

.common-dropdown-project-select{
  width: 100% !important;
  background-image: url("http://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png");
  background-position: 97% 60%, 0 0 ! important;
  background-repeat: no-repeat;
  background-size: 25px 16px;
  border: none  ! important;    
  outline : medium none !important;
  display: inline-flex !important;
  height: 33px !important;
  vertical-align: top;
  -webkit-appearance: none;
}

select::-ms-expand {
  display: none;
}

【讨论】：

【解决方案5】：

您可以将此解决方案用于 firefox，仅对 mozilla 使用供应商伪类 :-moz-any() 和指针事件，并且不会影响其他浏览器，因为这两种浏览器自 3.6 版起都有效。

这是一个 jsbin 示例 http://jsbin.com/pozomu/4/edit

【讨论】：

【解决方案6】：

Mozilla Firefox 对此问题的回应是不可接受的。浏览器坏了，只不过是恶意代码的开放性伤口。他们将 V29-30 浏览器宣传为安全更新，但自发布之日起一周多后，V30 的通知才会出现。

我自己的反应是什么也不做，我鼓励所有其他开发人员也这样做。最终，用户会厌倦设计上的不一致并放弃 Mozilla Firefox，因为他们的数量更多。

如果一个合理的支持请求遭到完全的蔑视，而其他浏览器可以做到，但 Mozilla Firefox 不再可以。不是我必须修复我的代码，而是 Mozilla Firefox 必须修复他们的！

【讨论】：

【解决方案7】：

.SelectBox select {
   background: transparent;
   width: 182px;
   padding-right: 29px;
   font-size: 100%;
   text-indent: 0.01px;
   text-overflow: "";
   border: none;
   height: 17.5px;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.SelectBox {
   width: 154px;
   height: 15.8px;
   overflow: hidden;
   background: url("Images/Arrow.png") no-repeat 141px center #ffffff;
   border-radius:2px;
   border: 1px solid #B90F22;
}

<div class="SelectBox">
   <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
   </select>
</div>

这似乎在除 IE 之外的所有主流浏览器中都能正常工作。 IE 正在回退到默认下拉菜单，所以这应该不是太大的问题。

【讨论】：

【解决方案8】：

虽然这是一个非常肮脏的 hack，但您可以通过在选择包装器的 CSS 中的向下箭头上方添加另一个覆盖元素来解决此问题（在我的例子中是 .form-control-select）：

/* The arrow */
.form-control-select:after {
    content: "\f078";
    z-index: 3;
    pointer-events: none;
    position: absolute;
    right: 10px;
    top: 9px;
    padding: 6px 7px;
    font-size: 10px;
}

/* the white overlay to hide Firefox' arrow */    
.form-control-select:before {
    position: absolute;
    right: 1px;
    top: 2px;
    bottom: 1px;
    width: 20px;
    background: #fff;
    content: "";
    z-index: 2;
    border: 1px solid transparent;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 1px;
    pointer-events: none; 
}

我的 HTML：

<div class="form-control-select">
  <select class="form-control">
    <option value="1">one</option>
    <option value="2">two</option>
  </select>
</div>

【讨论】：