Firefox 30.0 - -moz-appearance: none không hoạt động

Question

Tôi đang sử dụng mã này để ẩn mũi tên thả xuống và hoạt động của nó tốt trước khi cập nhật firefox nhưng bây giờ trong firefox 30.0 bị hỏng.

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

}

Answer 1

Tôi tìm thấy một giải pháp

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

Answer 2

này một sự thay đổi trong Firefox báo cáo là Bug 649849 - Cho phép phong cách của chọn yếu tố mũi tên sổ xuống.

Đây có thể là cải thiện khả năng sử dụng có chủ ý. Có lẽ tốt nhất là giả định rằng đó là và ngừng muốn ẩn mũi tên (đó là cách của trình duyệt để chỉ ra rằng có một trình đơn thả xuống).

Answer 3

Hình như nó có thể được cố định trong các phiên bản tương lai https://bugzilla.mozilla.org/show_bug.cgi?id=1017864#c9

Answer 4

Nếu bạn thực sự muốn gắn bó với các phiên bản thấp hơn, tôi đề nghị như một tác phẩm xung quanh mà bạn đặt chọn phần tử bên trong một vùng chứa có ẩn-x ẩn. Sau đó, ẩn menu thả xuống và điều chỉnh vị trí nền của bạn cho phù hợp để được nhìn thấy.

ví dụ
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;} 

Trên đây cũng sẽ ảnh hưởng đến phiên bản mới nhất vì vậy bạn cần javascript dưới đây trước khi thêm những css

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

Nó không đẹp nhất nhưng tôi hy vọng nó sẽ giúp :)