Xóa đường viền khỏi hộp chọn trong FF

Có thể loại bỏ đường chấm bao quanh mục đã chọn trong phần tử được chọn không?

Tôi đã cố gắng thêm thuộc outlinetính trong CSS nhưng nó không hoạt động, ít nhất là không trong FF.

<style>
   select { outline:none; }
</style>

Cập nhật
Trước khi bạn tiếp tục và xóa đường viền, vui lòng đọc phần này.
http://www.outlinenone.com/

Tôi đã tìm thấy một giải pháp, nhưng nó là mẹ của tất cả các vụ hack, hy vọng nó sẽ là điểm khởi đầu cho các giải pháp khác mạnh mẽ hơn. Nhược điểm (quá lớn theo ý kiến ​​của tôi) là bất kỳ trình duyệt nào không hỗ trợ text-shadownhưng hỗ trợrgba (IE 9) sẽ không hiển thị văn bản trừ khi bạn sử dụng một thư viện như Modernizr (không được kiểm tra, chỉ là lý thuyết).

Firefox sử dụng màu văn bản để xác định màu của đường viền chấm. Vì vậy, hãy nói nếu bạn làm ...

select {
  color: rgba(0,0,0,0);
}

Firefox sẽ hiển thị đường viền chấm trong suốt. Nhưng tất nhiên văn bản của bạn cũng sẽ trong suốt! Vì vậy, bằng cách nào đó chúng ta phải hiển thị văn bản. text-shadowđến để giải cứu:

select {
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

Chúng tôi đặt một bóng văn bản không có độ lệch và không bị mờ, để thay thế văn bản. Tất nhiên trình duyệt cũ hơn không hiểu bất kỳ điều gì về điều này, vì vậy chúng tôi phải cung cấp một bản dự phòng cho màu sắc:

select {
  color: #000;
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

Đây là lúc IE9 phát huy tác dụng: nó hỗ trợ rgbanhưng không hỗ trợ text-shadow, vì vậy bạn sẽ nhận được một hộp chọn trống. Tải phiên bản Modernizr của bạn với tính text-shadownăng phát hiện và làm ...

.no-textshadow select {
  color: #000;
}

Thưởng thức.

Chà, câu trả lời của Duopixel là hoàn hảo. Nếu chúng ta tiến thêm một bước nữa, chúng ta có thể làm cho nó chống đạn.

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

Đó là bạn, chỉ hợp lệ cho Firefox và đường viền chấm xấu xí xung quanh tùy chọn đã chọn đã biến mất.

Đây là sự hợp tác của các giải pháp để khắc phục các vấn đề về kiểu dáng với các hộp chọn của Firefox. Sử dụng bộ chọn CSS này như một phần của quá trình đặt lại CSS thông thường của bạn.

Lớp xóa đường viền theo câu hỏi nhưng cũng xóa mọi hình nền (vì tôi thường sử dụng mũi tên thả xuống tùy chỉnh và mũi tên thả xuống của hệ thống Firefoxes hiện không thể xóa được). Nếu sử dụng hình nền cho bất kỳ thứ gì khác ngoài hình ảnh thả xuống, chỉ cần xóa dòngbackground-image: none !important;

@-moz-document url-prefix() {
    select, select:-moz-focusring, select::-moz-focus-inner {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
       background-image: none !important;
       border:0;
    }
}

Điều này sẽ nhắm mục tiêu tất cả các phiên bản firefox

@-moz-document url-prefix() { 
    select {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
    }
}

Bạn có thể muốn xóa! Important, nếu bạn định để đường viền xuất hiện trên các trang khác trên trang web của mình sử dụng cùng một biểu định kiểu.

Nói chung, các điều khiển biểu mẫu không thể tạo kiểu ở mức độ chính xác đó. Không có trình duyệt nào mà tôi biết hỗ trợ một loạt các thuộc tính hợp lý trong tất cả các điều khiển. Đó là lý do tại sao có hàng đống thư viện JavaScript "giả mạo" các điều khiển biểu mẫu bằng hình ảnh và các phần tử HTML khác và mô phỏng chức năng ban đầu của chúng bằng mã:

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

...

<select onchange="this.blur();">

Nếu bạn sử dụng điều này, đường viền vẫn giữ nguyên cho đến khi bạn chọn một mục từ danh sách.

Hãy thử một trong những cách sau:

a:active {
 outline: none;
 -moz-outline: none;
}

a {
-moz-user-focus: none;
}

Tài liệu tham khảo

Đây là giải pháp

:focus {outline:none;}
::-moz-focus-inner {border:0;}

Xóa đường viền viền / đường viền chấm chấm khỏi Firefox Tất cả các Thẻ có thể Chọn.

Đặt dòng mã này vào biểu định kiểu của bạn:

*:focus{outline:none !important;}   

Thêm kiểu viền: không có vào lựa chọn của bạn trong CSS.

select {
border-style: none; }

    input[type='range']::-moz-focus-outer {
    border: 0;
    outline: none !important;
    }

làm việc 100%

Thao tác này sẽ xóa tiêu điểm khỏi selectphần tử và đường viền :

$("select").click(function(){
    $(this).blur();
});

Mặc dù điều này không phải là không có thiếu sót của nó trên các trình duyệt khác. Bạn sẽ muốn kiểm tra trình duyệt mà người dùng đang sử dụng:

if (FIREFOX) {
    //implement the code
}