隐藏 <select> 元素的下拉箭头的正确“-moz-appearance”值是啥

Posted 2023-03-06

【中文标题】隐藏 <select> 元素的下拉箭头的正确“-moz-appearance”值是啥

【英文标题】：What is the correct "-moz-appearance" value to hide dropdown arrow of a <select> element隐藏 <select> 元素的下拉箭头的正确“-moz-appearance”值是什么

【发布时间】：2011-10-10 21:18:30

【问题描述】：

我正在尝试仅使用 CSS 为 <select> 元素的下拉箭头设置样式，它在 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;

渲染精美as seen here

按照这种逻辑，要让它在 Firefox 中运行，我唯一要做的就是将所有 -webkit-* 内容添加为 -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%，唯一的问题是默认的下拉箭头不会消失，而是停留在背景图像的顶部 as seen here

看起来-moz-appearance: button; 不适用于<select> 元素。 -moz-appearance: none; 也无法移除默认的下拉箭头。

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

更新：

2014 年 12 月 11 日：停止发明新的技巧。 4 年半之后，-moz-appearance:none 从 Firefox 35 开始就开始工作了。虽然moz-appearance:button 仍然坏掉了，但无论如何你都不需要使用它。 Here is a very basic working example.

2014 年 4 月 28 日：上面提到的 css hack 工作了几个月，但自 2014 年 4 月开始，这个错误又悄悄回到了所有平台上的 Firefox 31.0.a1 Nightly。

【问题讨论】：

只是为了让您知道该错误已在 Firefox 35 中修复 \o/

@MatTheCat 4.5 年后哇！与此同时，我换了 2 个女朋友、3 条狗和 2 套公寓。但我想我们必须感谢他们最终还是修复了一半。

这意味着

【参考方案1】：

在 Mac OS X 中，-moz-appearance: window; 将根据MDN 文档删除箭头appearance (-moz-appearance, -webkit-appearance)。

它在 Firefox 13 上的 Mac OS X v10.8.2 (Mountain Lion) 上进行了测试。另请参阅：649849 - Make -moz-appearance:none on a combobox remove the dropdown button。

【讨论】：

适用于 Mac 但不适用于 Windows。不过努力。

【参考方案2】：

当我们仍在等待 Firefox 35 中的修复时，值得尝试以下两个选项：

select 
    -moz-appearance: scrollbartrack-vertical;

或者

select 
    -moz-appearance: treeview;

它们只会隐藏您为选择元素自定义样式而放入的任何箭头背景图像。因此，您会得到一个标准浏览器箭头，而不是浏览器箭头和您自己的自定义箭头的可怕组合。

【参考方案3】：

更新：这已在 Firefox v35 中得到修复。详情请见full gist。

---

== 如何在 Firefox 中隐藏选择箭头 ==

刚刚想通了怎么做。诀窍是混合使用-prefix-appearance、text-indent 和text-overflow。它是纯 CSS，不需要额外的标记。

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

长话短说，通过将其向右推一点，溢出就摆脱了箭头。很整洁吧？

我刚刚写的this gist 的更多详细信息。在 Ubuntu、Mac 和 Windows 上进行了测试，均使用最新的 Firefox 版本。

【讨论】：

这是一个很好的解决方法，但是当用户将视口更改为小于 100% 时，它似乎并没有将箭头推得足够远

是的，@MathiasaurusRex。您正在测试哪个操作系统和浏览器版本？我正在制作一个响应式表单，我刚刚确认了。

@JoãoCunha 抱歉，我说错了。我的意思是将视口缩放降低到 100% 以下。我正在使用 FireFox 26.0 并在 OSX 10.9.1 上运行，这是一个 JSFiddle - jsfiddle.net/2Vtf9/1 点击命令减号 (-) 将缩放减少到 90% 将导致显示下拉箭头。

问题不大，因为无论如何修复都是一种黑客攻击，而Mozilla只需要修复错误。您的修复以及它对缩放的反应方式对我来说似乎是合乎逻辑的！

我只想指出，从 Firefox 31（夜间构建，2014 年 5 月）开始，此解决方法不再有效。据我所知，目前没有解决方法。

【参考方案4】：

这就是伙计们！ 已修复！

---

拭目以待：https://bugzilla.mozilla.org/show_bug.cgi?id=649849

或workaround

---

对于那些想知道的人：

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

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

其次，有能力做到这一点（包括重写）的人暂时被分配到另一个项目（b2g），直到该项目接近完成时才有时间。

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

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

---

该页面已不存在，错误尚未修复，但 an acceptable workaround 来自 João Cunha，你们现在可以感谢他！

【讨论】：

谢谢！希望它会很快得到修复。作为一种解决方法，我将使用the original code in the other question you answered

天啊，一年过去了，看来我们还可以等。

是的，很遗憾，1年半之后，这个bug报告的状态一直停留在“NEW”

我添加了一个指向您的答案的链接，您的技巧值得一看！

哈！我发现人们现在正在实施这些黑客来修复所谓的开源浏览器引擎中的基本 CSS 错误，这很有趣（也很可悲）！只是因为拒绝修复这个错误的权力。让我想起了人们发明的所有 IE6 黑客...

【参考方案5】：

添加时它正在工作：

选择 宽度：115%

【讨论】：

这应该是评论。

【参考方案6】：

虽然您还不能让 Firefox 移除下拉箭头（请参阅 MatTheCat 的帖子），但您可以隐藏“风格化”背景图像，使其不显示在 Firefox 中。

-moz-background-position: -9999px -9999px!important;

这会将其定位在框架之外，为您留下默认的选择框箭头 - 同时在 Webkit 中保留风格化版本。

【讨论】：

我为什么要这样做？

没有-moz-background-position这样的东西

你可以这样做 @-moz-document url-prefix() select background-position: -9999px!important;

【参考方案7】：

试着把 opacity:0;您的选择元素将不可见，但当您单击它时选项将可见。

【讨论】：

如果选择元素不可见，我们应该如何点击选项？通过在选择上放置宽背景图像？你怎么知道你刚刚选择了哪个选项？通过放置一个 onchange 事件并更新页面上的一些文本？对不起，但这根本不是答案。这是一个毛茸茸的巨型黑客。

【参考方案8】：

要摆脱默认的下拉箭头，请使用：

-moz-appearance: window; 

【讨论】：

根据developer.mozilla.org/en-US/docs/CSS/-moz-appearance 列出的值，这甚至不是一个有效值，不用说它不起作用：i.imgur.com/w4hwD.jpg

适用于 MacOS/Firefox v 19.0.2

这当然对我有用。 MacOS 10.9/Firefox33.0

由于某些奇怪的原因只能在 Mac OSX 上运行，在 Windows 上肯定不行