Firefox 30.0 - -moz-appearance：没有一个不起作用答案

【问题标题】：Firefox 30.0 - -moz-appearance: none not workingFirefox 30.0 - -moz-appearance：没有一个不起作用
【发布时间】：2014-08-01 15:41:58
【问题描述】：

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

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

}

【问题讨论】：

Mozilla 说不要使用它。 developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance

标签： css firefox drop-down-menu

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

我找到了解决办法

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

【讨论】：

【解决方案4】：

如果您真的想坚持使用较低的版本，我建议您将 select 元素放在一个隐藏了 overflow-x 的容器中。然后隐藏下拉菜单并相应地调整您的背景位置以使其可见。

例如
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');
}

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

【讨论】：