首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >要隐藏<select>元素的下拉箭头,正确的“-moz-外观”值是什么

要隐藏<select>元素的下拉箭头,正确的“-moz-外观”值是什么
EN

Stack Overflow用户
提问于 2011-07-22 16:50:09
回答 8查看 106.5K关注 0票数 68

我正在尝试仅使用CSS设置<select>元素的下拉箭头样式,它在Chrome/Safari中工作得很好:

代码语言:javascript
运行
复制
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

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

代码语言:javascript
运行
复制
-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的顶部

对于<select>元素,-moz-appearance: button;似乎不起作用。此外,-moz-appearance: none;不会删除默认的下拉箭头。

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

更新:

2014年12月11日停止发明新的黑客。4年半后,-moz-appearance:none从Firefox35开始工作。虽然moz-appearance:button仍然是坏的,但无论如何你都不需要使用它。Here is a very basic working example.

Firefox2014年4月28日:提到的css hack工作了几个月,但自2014年4月初以来,这个错误在所有平台上每晚都会重新出现在 31.0.a1中。

EN

回答 8

Stack Overflow用户

回答已采纳

发布于 2011-07-22 17:17:20

就是这样,伙计们!修复了!

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

workaround

对于那些想知道的人:

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

首先是

,因为bug中有许多恶意垃圾邮件,所以它为任何被分配到这一任务的人创建了一个充满敌意的工作场所。

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

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

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

这个页面已经不存在了,错误也没有修复,但是an acceptable workaround来自João Cunha,你们现在可以感谢他了!

票数 39
EN

Stack Overflow用户

发布于 2013-08-20 13:37:32

火狐更新:此问题已在 v35中修复。有关详细信息,请参阅。

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

只是想出了怎么做。诀窍是混合使用-prefix-appearancetext-indenttext-overflow。它是纯CSS,不需要额外的标记。

代码语言:javascript
运行
复制
select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

长话短说,通过将它向右推一点,溢出就摆脱了箭头。很整洁,是吧?

关于我刚写的this gist的更多细节。在Ubuntu,Mac和Windows上进行了测试,都使用了最新的Firefox版本。

票数 99
EN

Stack Overflow用户

发布于 2012-09-26 12:43:21

要取消默认的下拉箭头,请使用:

代码语言:javascript
运行
复制
-moz-appearance: window; 
票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/6787667

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档