Firefox 30不再隐藏选择框箭头

Question

我一直使用"技巧":

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

在FF上做自定义选择框但是自从版本30发布以来,这完全停止了.我试图找出这是否被弃用但找不到任何东西.是否有解决方法或其他方法来替换它？

Answer 1

更新

截至2015年1月,现在再次使用Firefox 35发布.请参阅下面的答案以获取历史参考.

 

 

背景

使用的黑客是这样的:

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

在我的测试中,在FF 29上,-moz-appearance:none;没有任何影响.导致箭头框不出现的原因是后两行.它说任何溢出都将被一个空字符串替换,然后它使用text-indent来导致select溢出.由于箭头框呈现为单个元素,类似于单个字母,因此会将其替换为空字符串.

发生了什么

Mozilla的某个人注意到如果你在下拉列表中有填充select,箭头不会改变大小.根据错误报告,此问题现已修复:

问题是这与正常的CSS规则离开了箭头.我试过padding,text-indent,margin,white-space,text-wrap,和几个多了,我找不到任何会影响它.不幸的是,在互联网的其他地方 ,人们也在说同样的话.

现在怎么办

1. 我们有几个选择.你可以使用叠加结合pointer-events:none来设置你想要的下拉样式:教程

2. 您可以select使用Javascript:Tutorial创建一个完全独立的下拉列表来替换

我们还可以在Firefox的Bugzilla上观看请求,并希望有一天他们会创建一个非hacky方式来执行此操作.请注意:不要去那里开始发表关于想要它的评论.它被推迟的部分原因是人们投入了合适的人选.投票支持这个问题可能会有所帮助.

2014年9月更新

现在正在积极地为Firefox工作.已提交2个补丁,已等待一周的审核.最有可能的情况是,这使得它进入FF35 Aurora,我们有几周时间在截止日期之前获得审核和批准(Firefox按照6周的发布时间表运行).它也可能被延迟,甚至理论上它可以"提升",意味着修补当前的Aurora和Beta版本,以便更快地发布.

2014年10月更新

这个怎么现在正式解决了!的种类.已经提交了一个允许用户隐藏下拉箭头元素的补丁,并将于2015年1月随Firefox 35一起提供.

这只会允许用户隐藏箭头.设计它是另一个问题,已被分拆成另一个将在未来考虑的错误票.

2015年1月更新

这已经修复了!Firefox 35于1月13日问世,您现在可以使用它-moz-appearance:none来移除箭头.

Answer 2

是的!很好 !THKS

JS FIDDLE

.customSelect {
    font-size: inherit;
    margin: 0;
    padding: 0.5em;
    background-color: transparent;
    color: #393939;
    opacity:1;
    -moz-appearance: none;
    border: 0 none;
    border-radius: 0px;
    border:1px solid #B1B2B3;
    padding-right: 2.5em;
}