什么是正确的“-moz-appearance"?隐藏 <select> 的下拉箭头的值元素

问题描述

我正在尝试仅使用 CSS 设置 <select> 元素的下拉箭头的样式，它在 Chrome/Safari 中完美运行:

I'm trying to style the dropdown arrow of a <select> element with CSS only , it works perfectly in Chrome/Safari:

select {
  -webkit-appearance: button;
  -webkit-border-radius: 2px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-padding-end: 20px;
  -webkit-padding-start: 2px;
  -webkit-user-select: none;

  background-image: url('./select-arrow1.png') ;
  background-position: center right;
  background-repeat: no-repeat;
  border: 1px solid #AAA;
  margin: 0;
  padding-top: 2px;
  padding-bottom: 2px;
  width: 200px;
}

呈现精美如此处所见

按照这个逻辑，我唯一需要做的就是将所有 -webkit-* 内容添加为 -moz-* :

By that logic, the only thing I had to do to make it work in Firefox was to add all -webkit-* stuff as -moz-* :

-moz-appearance: button;
-moz-border-radius: 2px;
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-moz-padding-end: 20px;
-moz-padding-start: 2px;
-moz-user-select: none;

它适用于 99%，唯一的问题是默认的下拉箭头不会消失，而是停留在背景图像的顶部 如这里所见

It works for 99%, the only problem is that the default dropdown arrow doesn't go away, and stays on top of the background image as seen here

看起来 -moz-appearance: button; 不适用于 元素.此外 -moz-appearance: none; 对删除默认下拉箭头无效.

It looks like -moz-appearance: button; does not work for a <select> element. Also -moz-appearance: none; has no effect to remove the default dropdown arrow.

那么 -moz-appearance 删除默认下拉箭头的正确值是多少?

So what is the correct value for -moz-appearance to remove the default dropdown arrow?

2014 年 12 月 11 日:停止发明新的黑客.4 年半后，-moz-appearance:none 从 Firefox 35 开始工作.虽然 moz-appearance:button 仍然坏了，你不需要无论如何都要使用它.这是一个非常基本的工作示例.

December 11, 2014: Stop inventing new hacks. After 4 and a half years, -moz-appearance:none is starting to work since Firefox 35. Although moz-appearance:button is still broken, you don't need to use it anyway. Here is a very basic working example.

2014 年 4 月 28 日:提到的 css hack 工作了几个月，但自 2014 年 4 月开始，这个错误又在所有平台上蔓延到 Firefox 31.0.a1 Nightly.

April 28, 2014: The mentioned css hack worked for a couple of months but since the begining of April 2014 this bug is creeping back into Firefox 31.0.a1 Nightly on all platforms.

推荐答案

伙计们！已修复！

等等看:https://bugzilla.mozilla.org/show_bug.cgi?id=649849

或 解决方法

对于那些想知道的人:

https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c59

首先，由于该漏洞包含大量恶意垃圾邮件，因此它为任何被分配到此任务的人创造了一个充满敌意的工作场所.

其次，有能力做到这一点(包括重写)的人暂时被分配到另一个项目(b2g)并且在该项目接近完成之前没有时间.

Secondly, the person who has the ability to do this (which includes rewriting ) has been allocated to another project (b2g) for the time being and wont have time until that project get nearer to completion.

第三，即使那个人有时间，也不能保证这将是一个优先事项，因为尽管 webkit 有这个，它打破了应该如何工作的规范(这是我被告知的，我个人不知道规格)

Third, even when that person has the time again, there is no guarantee that this will be a priority because, despite webkit having this, it breaks the spec for how is supposed to work (This is what I was told, I do not personally know the spec)

现在查看 https://wiki.mozilla.org/B2G/Schedule_Roadmap ;)

该页面不再存在且错误尚未修复但 一种可以接受的解决方法来自 João Cunha，你们现在可以感谢他了！

The page no longer exists and the bug hasn't be fixed but an acceptable workaround came from João Cunha, you guys can thank him for now!

这篇关于什么是正确的“-moz-appearance"?隐藏 <select> 的下拉箭头的值元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！