Firefox 30不再隐藏选择框箭头

Question

我一直使用这个“技巧”:

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

我希望在Firefox上创建自定义选择框，但自从30版本发布以来，这个功能完全无法使用。我尝试查找是否已将其弃用，但找不到任何信息。有没有解决方法或替代方法？

- Jaypee

---

我认为你不应该依赖特定于供应商的定义。那其他浏览器呢？如果您想样式化选择，也许需要使用像Select2这样的jQuery插件？ - Yuriy Galanter

在其他浏览器上这个功能正常，直到Firefox 30版本之前也一直正常。 - Jaypee

@AndyM 这显然已经被更改、弃用或其他什么了。我的问题是，是否有人知道现在应该使用什么来替代它。 - Jaypee

我会调查一下。我认为这可能与一个错误有关，该错误将箭头与填充分离，尽管听起来很奇怪。当我找到解决方案时，我会发布更新的。 - Kelderic

Duplicate - Quentin

感谢您查看 @AndyM - Jaypee

Answer 1

更新

截至2015年1月，随着Firefox 35的发布，此功能现在可以正常使用。有关历史参考，请参见下面的答案。

 

---

---

---

 

背景

使用的黑客技术是这样的:

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

在我的测试中，使用FF 29，-moz-appearance:none; 没有任何影响。导致箭头框不出现的原因是后面两行代码。这些代码将任何溢出内容替换为空字符串，然后使用text-indent使 select 溢出。由于箭头框被渲染为单个元素，类似于单个字母，这导致它被空字符串替换。

发生了什么

Mozilla的某位员工注意到，如果下拉菜单的 select 元素上有padding，箭头大小不会改变。根据错误报告，此问题现已得到解决:

这个问题导致箭头与普通的CSS规则脱节。我尝试过padding、text-indent、margin、white-space、text-wrap等方法，但是都没有影响它。在其他地方，如GitHub和Stack Overflow上，人们也遇到了同样的问题。

现在怎么办

1. 我们有几个选项。您可以使用覆盖层结合 pointer-events:none 来自定义下拉菜单的样式：教程

2. 您可以使用Javascript创建一个完全独立的下拉菜单来替换 select：教程

我们也可以关注 Firefox Bugzilla 上的请求，希望他们能够创建一种非常规方法来解决这个问题。 请注意：不要去那里并开始发布想要它的评论。部分原因是人们引起了骚动而导致延迟。 为该问题投票 可能会有所帮助。

---

2014年9月更新

现在Firefox正在积极开发中。2个修补程序已经提交并等待审核已有一周时间。最有可能的情况是它将会被纳入FF35 Aurora，我们还有几周时间来进行审核和批准 (Firefox按照6周发布一次的计划运作)。它也可能会被推迟，甚至在当前的Aurora和Beta版本中被"提升"，以便更早地发布。

---

2014年10月更新

这个问题现在已经正式解决了！有点。一个允许用户隐藏下拉箭头元素的补丁已经提交，并将随Firefox 35一起在2015年1月发布。

这只允许用户隐藏箭头。对其进行样式设置是另一个问题，已经拆分为另一个错误票，将在未来考虑。

---

2015年1月更新

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

- Kelderic

---

感谢您提供如此详细的答案，Andy。我会仔细查看并尝试您建议的解决方案。您看到那个错误的日期了吗？我知道有人很长时间以来一直在要求修复。谢谢！ - Jaypee

很高兴我能帮到你。还有其他什么问题需要我解答吗？ - Kelderic

嗨 @AndyM，再次感谢您的出色回答。 我已经仔细阅读了，但在这两种情况下，选择结构都必须被重写（添加类，添加标记等）。 他们取消的选项是使用常规选择元素工作的。 我会将您的答案设置为正确，因为它确实是正确的，并且因为您付出的努力，只是因为表单结构是从插件中拉出的，我无法编辑元素。 当我有时间时，我会使用jquery添加那些标记和父级标签。 再次感谢。 - Jaypee

你说的两种情况，是指我在“现在怎么办？”下提出的两个选项吗？如果您有兴趣，我可以帮助您让其中任何一个正常工作。这在很大程度上取决于您想要支持哪些浏览器版本。 - Kelderic

@AndyM 发布将于明天进行 - 准备更新您的答案！https://developer.mozilla.org/zh-CN/Firefox/Releases/35 - Mathias Rechtzigel

Answer 2

非常好！谢谢。

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

- user3730166

Answer 3

.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会退回到默认的下拉菜单，所以这不应该是太大的问题。

- Tim Jongerius

Answer 4

Mozilla Firefox对这个问题的回应实在是令人无法接受。该浏览器存在漏洞，成为恶意代码攻击的目标。他们将V29-30浏览器推广为安全更新，但自发布日期以来一周多时间才出现了V30的通知。

我的反应是什么也不做，并鼓励其他开发者也这样做。最终，用户会因为设计上的不一致感到厌倦，像现在更多的人一样，放弃使用Mozilla Firefox。

如果合理的支持请求得到蔑视，而其他浏览器可以做到，而Mozilla Firefox不能做到。那么需要改变的不是我要解决我的代码问题，而是Mozilla Firefox需要修复他们的问题！

- user1557757

Answer 5

你可以使用这个解决方案来针对 Firefox 进行操作，使用厂商伪类 :-moz-any() 和指针事件只针对 Mozilla 浏览器，不影响其他浏览器，因为两者都从版本 3.6 开始有效。

下面是一个 jsbin 示例： http://jsbin.com/pozomu/4/edit

- user3806477

Answer 6

一种选择是将 select 元素包装在带有 overflow: hidden 的容器元素中。增加 select 元素的宽度，将向下箭头推到右侧并超出图片。然后为容器元素添加与 select 元素相匹配的边框。

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

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

问题在于这会影响到设置在focus或验证错误上的样式，这就是为什么我最终采用了totas建议的方法，使用伪元素来覆盖箭头。

- adrice727

Answer 7

虽然这是一个相当不好的解决方法，但您可以通过在选择器包装器（在我的情况下为.form-control-select）的CSS中添加另一个覆盖元素来修复此问题：

/* 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>

- totas

Answer 8

我通过分别为div和select添加一些样式来解决了这个问题。

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

这里是js fiddle的链接。 JSFIDDLE 在所有浏览器上进行测试。

选择::-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;
}

- Rajdeep