什么是正确的“-moz外观”值隐藏< select>的下拉箭头。元件 [英] What is the correct "-moz-appearance" value to hide dropdown arrow of a <select> element

问题描述

我尝试使用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;
}

这将精美地呈现如这里所示

根据这个逻辑，我唯一需要做的是使它在Firefox中工作是添加所有 -webkit - * -moz - * ：<$ p
$ b

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; 对于< select> 元素不起作用。 -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.

April 28， 2014 ：提到的 css hack 工作了几个月，但从2014年4月开始这个bug正在回到Firefox 31.0.a1每晚在所有平台上。

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.

推荐答案

这是它的家伙！ FIXED！

请等待并查看： https://bugzilla.mozilla.org/show_bug.cgi?id=649849

或解决方法

对于那些想知道：

https://bugzilla.mozilla.org/show_bug.cgi？ id = 649849＃c59

首先，因为这个bug有很多敌意的垃圾邮件，为任何被分配到这个。

First, because the bug has a lot of hostile spam in it, it creates a hostile workplace for anyone who gets assigned to this.

其次，有能力做到这一点（包括重写）的人目前已被分配给另一个项目（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 ;）

页面不再存在，错误未修复，一个可接受的解决方法，你们可以感谢他现在！

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外观”值隐藏&lt; select&gt;的下拉箭头。元件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！