正确的“-moz-appearance”是什么？隐藏

发布于 2024-11-25 08:46:22 字数 1792 浏览 0 评论 0原文

我正在尝试仅使用 CSS 来设置

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

呈现精美如此处所示

按照这种逻辑，要使其在 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%，唯一的问题是默认的下拉箭头不会消失，并且停留在背景图像的顶部如此处所示

看起来 -moz-appearance: button; 不适用于 <选择> 元素。另外 -moz-appearance: none; 对于删除默认下拉箭头没有效果。

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

更新：

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

2014 年 4 月 28 日：提到的 CSS hack 工作了几个月，但自 2014 年 4 月开始，这个错误又重新出现在所有平台上的 Firefox 31.0.a1 Nightly 中。

原文

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

Which renders beautifully as seen here

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;

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

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.

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

Updates:

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.

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

春庭雪 2024-12-02 08:46:23

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

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

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

While you can't yet get Firefox to remove the dropdown arrow (see MatTheCat's post), you can hide your "stylized" background image from showing in Firefox.

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

This will position it out of frame, leaving you with the default select box arrow – while keeping the stylized version in Webkit.

回复收藏 0 原文

晨与橙与城 2024-12-02 08:46:23

添加时它起作用：

select { width:115% }

回复收藏 0 原文

耀眼的星火 2024-12-02 08:46:22

更新：此问题已在 Firefox v35 中修复。有关详细信息，请参阅完整要点。

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

刚刚弄清楚如何做到这一点。诀窍是混合使用 -prefix-appearance、text-indent 和 text-overflow。它是纯 CSS，不需要额外的标记。

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

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

有关我刚刚写的这个要点的更多详细信息。在 Ubuntu、Mac 和 Windows 上进行了测试，全部使用最新的 Firefox 版本。

Update: this was fixed in Firefox v35. See the full gist for details.

== how to hide the select arrow in Firefox ==

Just figured out how to do it. The trick is to use a mix of -prefix-appearance, text-indent and text-overflow. It is pure CSS and requires no extra markup.

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

Long story short, by pushing it a tiny bit to the right, the overflow gets rid of the arrow. Pretty neat, huh?

More details on this gist I just wrote. Tested on Ubuntu, Mac and Windows, all with recent Firefox versions.

回复收藏 0 原文

坏尐絯 2024-12-02 08:46:22

就是这样！伙计们！ 已修复！

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

或解决方法< /a>

对于那些想知道的人：

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

首先，由于该错误包含大量恶意垃圾邮件，因此它为分配到此的任何人创建了一个充满敌意的工作场所。
其次，有能力做到这一点（包括重写）的人已暂时被分配到另一个项目（b2g），并且在该项目接近完成之前没有时间。
第三，即使那个人再次有时间，也不能保证这将是一个优先事项，因为尽管 webkit 有这个，它打破了应该如何工作的规范（这是我被告知的，我个人不知道规格）

现在请参阅https://wiki.mozilla.org/B2G/Schedule_Roadmap ;)

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

回复收藏 0 原文

又怨 2024-12-02 08:46:22

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

-moz-appearance: window;

To get rid of the default dropdown arrow use:

-moz-appearance: window;

回复收藏 0 原文

孤者何惧 2024-12-02 08:46:22

尝试设置不透明度：0；您选择的元素将不可见，但当您单击它时，选项将可见。

回复收藏 0 原文

你与昨日 2024-12-02 08:46:22

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

select {
    -moz-appearance: scrollbartrack-vertical;
}

或者

select {
    -moz-appearance: treeview;
}

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

It is worth trying these two options below while we're still waiting for the fix in Firefox 35:

select {
    -moz-appearance: scrollbartrack-vertical;
}

select {
    -moz-appearance: treeview;
}

They will just hide any arrow background image you have put in to custom style your select element. So you get a bog-standard browser arrow instead of a horrible combination of both the browser arrow and your own custom arrow.

回复收藏 0 原文