Css 什么是正确的-moz外观“;用于隐藏a的下拉箭头的值<;选择>;要素

Css 什么是正确的-moz外观“;用于隐藏a的下拉箭头的值<;选择>;要素,css,firefox,webkit,gecko,Css,Firefox,Webkit,Gecko,我正在尝试仅使用CSS为元素的下拉箭头设置样式,它在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:

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

-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外观:按钮不适用于
元素。还有
-moz外观:无对删除默认下拉箭头无效

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

更新: 2014年12月11日停止发明新的黑客。4年半后,
-moz外观:自Firefox35以来,没有一款
开始工作。虽然
moz外观:按钮
仍然损坏,但您不需要使用它


2014年4月28日:所提到的程序运行了几个月,但自2014年4月初以来,该漏洞每晚都会在所有平台上潜入Firefox 31.0.a1。

这就是it人员修复


拭目以待:


对于那些想知道:

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

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

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

现在看;)



这个页面已经不存在了,这个bug还没有被修复,但是来自乔·库尼亚,你们现在可以感谢他了

要摆脱默认下拉箭头,请使用:

-moz-appearance: window; 

尝试放置不透明度:0;您的选择元素将不可见,但当您单击它时,选项将可见。

在Mac OS中
-moz外观:窗口将根据此处的MDN文档删除箭头:。在Mac OS X 10.8.2上的Firefox 13上测试。另请参阅:。

虽然您还无法让Firefox删除下拉箭头(请参阅MatTheCat的帖子),但您可以隐藏“样式化”的背景图像,使其不显示在Firefox中

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

这会将其定位在框架外,留下默认的选择框箭头–同时将样式化版本保留在Webkit中。

添加以下内容时,它会起作用:

选择{width:115%}

更新:这在Firefox v35中已修复。有关详细信息,请参阅


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

我只是想知道怎么做。诀窍是混合使用
前缀外观
文本缩进
文本溢出
。它是纯CSS,不需要额外的标记

select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}
长话短说,将箭头向右推一点点,溢出的箭头就会消失。很整洁,是吗


关于我刚才写的更多细节。在Ubuntu、Mac和Windows上测试,都是最新的Firefox版本。

当我们还在等待FF35中的修复时,值得尝试以下两个选项:

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



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

谢谢!希望很快就能修好。作为一种解决方法,我将使用Geez,一年后,我们似乎仍然可以等待。是的,非常遗憾的是,在一年半之后,这个bug报告的状态仍然是“新的”。我添加了一个链接到您的答案,您的技巧值得关注!哈我觉得很有趣(也很悲哀)的是,人们现在正在实施这些黑客技术来修复所谓的开源浏览器引擎中的基本CSS错误!仅仅是因为那些力量拒绝修复这个错误。这让我想起了人们发明的所有IE6黑客……根据上列出的值,这甚至不是一个有效的值,不用说它不起作用:在MacOS/Firefox v 19.0.2上有效这对我来说确实有效。MacOS 10.9/Firefox33.0由于某些奇怪的原因只能在MacOSX上工作,在Windows上肯定不工作如果select元素不可见,我们应该如何单击选项?通过在“选择”屏幕上放置宽背景图像?你怎么知道你刚刚选择了哪个选项?通过放置onchange事件并更新页面上的一些文本?对不起,这根本不是答案。这是一个毛茸茸的巨大黑客。这应该是一个注释。我为什么要这样做?没有
-moz背景位置
这样的事情,但是你可以做@moz文档url-prefix(){select{background position:-9999px!important;}这是一个很好的解决方法,但是,当用户将视口更改为小于100%的值时,它似乎没有足够地将箭头推开。是的,确实如此,@MathiasaurusRex。您正在测试哪个操作系统和浏览器版本?我现在正在写一份回复表,我刚刚确认了。@JoãoCunha对不起,我说错了。我的意思是将视口缩放减少到100%以下。我使用的是FireFox 26.0,运行在OSX 10.9.1上,这里有一个JSFIDLE-HITCING命令减号(-),它将缩放缩小到90%,将显示下拉箭头。这不是什么大问题,因为修复是一种黑客行为,mozilla只需要修复这个bug。你的修正和它对缩放的反应在我看来是合乎逻辑的!我只想指出,这种解决方法在Firefox上不再有效
select {
    -moz-appearance: treeview;
}