Question

我正在使用此代码隐藏下载箭头，并且在更新firefox之前它的工作正常，但现在在firefox 30.0中已经坏了。

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

}

Answer 1

我找到了解决方案

select{
  height:20px; // height of the dropdown
  border:0 none; 
  display: flex;
  background: url('image/sample.jpg');
}

Answer 2

Firefox中的这一更改报告为Bug 649849 - 允许选择元素下拉箭头的样式。

这可能是故意的可用性改进。最好假设它是并且停止想要隐藏箭头（这是浏览器指示有下拉菜单的方式）。

Answer 3

看起来可以在将来的版本中修复它 https://bugzilla.mozilla.org/show_bug.cgi?id=1017864#c9

Answer 4

如果你真的想坚持使用较低版本，我建议你将select元素放在一个隐藏了overflow-x的容器中。然后隐藏下拉列表并相应调整背景位置以便查看。

e.g
HTML

<div class="container"><select>.....</div>

css

//assuming bg img is 20px
.container {max-width:200px; overflow-x:hidden;}
.container select.adjustme{width:220px; background: url('image/bg-dropdown.jpg') 180px center; border:0;}

以上也会影响最新版本，所以在添加这些css

之前你需要这个javascript

    function get_browser_info(){
    var ua=navigator.userAgent,tem,M=ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || []; 
    if(/trident/i.test(M[1])){
        tem=/\brv[ :]+(\d+)/g.exec(ua) || []; 
        return {name:'IE ',version:(tem[1]||'')};
        }   
    if(M[1]==='Chrome'){
        tem=ua.match(/\bOPR\/(\d+)/)
        if(tem!=null)   {return {name:'Opera', version:tem[1]};}
        }   
    M=M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if((tem=ua.match(/version\/(\d+)/i))!=null) {M.splice(1,1,tem[1]);}
    return {
      name: M[0],
      version: M[1]
    };
 }
var browser=get_browser_info();

if(browser.version<35){
$('.container select').addClass('adjustme');
}

它不是最漂亮但我希望它会有所帮助:)。

Firefox 30.0 - -moz-appearance：none无法正常工作

4 个答案: