Firefox bỏ qua đề cương và tập trung vào các yếu tố phong cách chọn khi sử dụng Tab

Question

Context

Firefox 14 (và 13); phong cách CSS cụ thể được bỏ qua trong các điều kiện nhất định

Vấn đề

Sử dụng CSS sau đây:

* 
{ 
    outline:none; 
    -moz-outline:none; 
    -moz-user-focus:ignore;  
} 

JSFiddle

Firefox 14 (và 13) bỏ qua những phong cách khi sử dụng Tab để chuyển đổi giữa các phần tử select. Nhấp vào các yếu tố này sau khi sử dụng Tab vẫn hiển thị đường viền.

Ghi chú

• Cụ thể styling select thay vì * không có tác dụng.
• Điều này chỉ xảy ra với các yếu tố select.

Các Câu hỏi

Đây có phải là một lỗi hoặc hành vi dự định?

Có bất kỳ kiểu CSS nào khác cần được sử dụng để ngăn đường viền xuất hiện vô thời hạn không?

Answer 1

Đây là một known bug đã gây ra một số cuộc thảo luận Stackoverflow. Từ những gì tôi đã đọc, Mozilla đã cho rằng CSS là nơi sai để xử lý hành vi phần tử này, và đã chọn thay vì xử lý nó bằng các phương tiện khác. Tại thời điểm này, giải pháp duy nhất là sử dụng tabindex="-1" hoặc để đặt phần tử hiển thị dưới dạng thứ gì đó khác và chỉnh sửa giao diện của một droplist - nhưng được cảnh báo, điều này sẽ mở ra một hộp sâu trong chính nó.

Nếu bạn lựa chọn để thực hiện điều này, tôi đã thành công trong quá khứ với các kludge sau:

select { 
    appearance: normal; 
     -webkit-appearance: none; 
     -moz-appearance: radio-container; /* renders text within select, without arrow chrome */ 
} 

Appearance cho trình duyệt để hiển thị các yếu tố như cái gì khác, nhưng điều này là không phù hợp từ nhà cung cấp để nhà cung cấp. appearance: normal; là thông số kỹ thuật, trong khi webkit thay thế bình thường bằng không. -moz-appearance: radio-container; là cách duy nhất tôi đã tìm thấy để hiển thị văn bản trong tùy chọn chọn đã chọn, trong khi loại bỏ mũi tên chrome cho một droplist hoàn toàn tùy chỉnh. Tuy nhiên, try experimenting with the available options cho đến khi bạn tìm thấy thứ gì đó hoạt động và không thêm vòng lấy nét bạn muốn tùy chỉnh. Internet Explorer sẽ yêu cầu thêm kludge để uốn cong lựa chọn theo nhu cầu của bạn. Hoàn toàn có thể, nhưng ngoài phạm vi cho câu hỏi và câu trả lời này.

Answer 2

Cho đến nay cách duy nhất tôi đã tìm thấy để vượt qua nó là để thiết lập tabindex='-1' (see fiddle) trong đó, tất nhiên, phải mất nguyên tố này hoàn toàn ra khỏi tab chuỗi lựa chọn. Điều đó sẽ không tốt cho giao diện người dùng, và dự đoán của tôi không chính xác những gì bạn mong muốn (tôi giả sử bạn muốn giữ tab khả năng truy cập nhưng chỉ cần tạo kiểu của riêng bạn để làm nổi bật).

Answer 3

Một giải pháp khác là đặt đường viền: không và đặt hộp đổ bóng. Ví dụ:

.my_elements:focus 
{ 
    outline: none; 
    box-shadow: 0 0 3px 0px red; 
}