Làm cách nào để xóa phác thảo rải rác của Firefox trên BUTTONS cũng như các liên kết?

Tôi có thể làm cho Firefox không hiển thị các đường viền tiêu điểm xấu xí trên các liên kết với điều này:

a:focus { 
    outline: none; 
}

Nhưng làm thế nào tôi có thể làm điều này cho <button>các thẻ là tốt? Khi tôi làm điều này:

button:focus { 
    outline: none; 
}

các nút vẫn có đường viền tiêu điểm chấm khi tôi nhấp vào chúng.

(và vâng, tôi biết đây là một vấn đề về khả năng sử dụng, nhưng tôi muốn cung cấp gợi ý tập trung của riêng tôi phù hợp với thiết kế thay vì các chấm xám xấu xí)

button::-moz-focus-inner {
  border: 0;
}

Không cần xác định một bộ chọn.

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

Tuy nhiên, điều này vi phạm các thực tiễn tốt nhất về khả năng truy cập từ W3C. Các phác thảo là có để giúp những người điều hướng với bàn phím.

https://www.w3.org/TR/WCAG20-TECHS/F78.html#F78-examples

Nếu bạn thích sử dụng CSS để thoát khỏi phác thảo chấm:

/*for FireFox*/
    input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner
    {   
        border : 0;
    } 
/*for IE8 and below */
    input[type="submit"]:focus, input[type="button"]:focus
    {     
        outline : none; 
    }

Dưới đây làm việc cho tôi trong trường hợp LIÊN KẾT, nghĩ đến việc chia sẻ - trong trường hợp ai đó quan tâm.

a, a:visited, a:focus, a:active, a:hover{
    outline:0 none !important;
}

Chúc mừng!

:focus, :active {
    outline: 0;
    border: 0;
}

[Cập nhật] Giải pháp này không hoạt động nữa. Giải pháp hiệu quả với tôi là giải pháp này https://stackoverflow.com/a/3844452/925560

Câu trả lời được đánh dấu là không hoạt động với Firefox 24.0.

Để xóa phác thảo rải rác của Firefox trên các nút và thẻ neo, tôi đã thêm mã dưới đây:

a:focus, a:active, 
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

Tôi tìm thấy giải pháp ở đây: http://aghoshb.com/articles/css-how-to-remove-firefoxs-diated-outline-on-buttons-and-anchor-tags.html

Đã thử hầu hết các câu trả lời ở đây, nhưng không ai trong số họ làm việc cho tôi. Khi tôi nhận ra rằng tôi cũng phải loại bỏ các phác thảo màu xanh trên các nút trên Chrome, tôi đã tìm thấy một giải pháp khác. Xóa đường viền màu xanh khỏi nút theo kiểu tùy chỉnh css trong Chrome

Mã này hoạt động với tôi trên Firefox phiên bản 30 trên Windows 7. Có lẽ nó có thể giúp người khác ngoài đó :)

button:focus {outline:0 !important;}

Không có cách nào để loại bỏ các tiêu điểm rải rác này trong Firefox bằng CSS.

Nếu bạn có quyền truy cập vào các máy tính nơi ứng dụng web của bạn hoạt động, hãy truy cập about: config trong Firefox và đặt browser.display.focus_ring_width thành 0. Sau đó, Firefox sẽ không hiển thị bất kỳ đường viền chấm nào cả.

Lỗi sau đây giải thích chủ đề: https://ormszilla.mozilla.org/show_orms.cgi?id=74225

Có rất nhiều giải pháp được tìm thấy trên web cho việc này, nhiều giải pháp trong số đó hoạt động, nhưng để buộc nó, để hoàn toàn không có gì có thể làm nổi bật / tập trung một khi sử dụng như sau:

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

Điều này chỉ cần thêm một chút bảo mật và niêm phong thỏa thuận!

Điều này sẽ có được kiểm soát phạm vi:

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

From: Xóa đường viền chấm ra khỏi phần tử đầu vào phạm vi trong Firefox

Đã thử nghiệm trên Firefox 46 và Chrome 49 bằng mã này.

input:focus, textarea:focus, button:focus {
    outline: none !important;
}

Trước (có thể nhìn thấy các chấm trắng)

After (Dấu chấm trắng là vô hình)

Nếu bạn muốn chỉ áp dụng trên một vài trường nhập, nút, v.v ... Sử dụng mã cụ thể hơn.

input[type=text] {
  outline: none !important;
}

Chúc mừng mã hóa !!

Đơn giản chỉ cần thêm css này cho hộp chọn

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

Điều này đang làm việc tốt cho tôi.

Tôi nghĩ bạn nên thực sự biết những gì bạn đang làm bằng cách xóa phác thảo tiêu điểm, bởi vì nó có thể gây rối cho điều hướng bàn phím và khả năng truy cập.

Nếu bạn cần lấy nó ra vì vấn đề thiết kế, hãy thêm :focus trạng thái vào nút thay thế nút này bằng một số dấu hiệu trực quan khác, như thay đổi đường viền thành màu sáng hơn hoặc đại loại như thế.

Đôi khi tôi cảm thấy cần phải đưa ra phác thảo khó chịu đó, nhưng tôi luôn chuẩn bị một gợi ý hình ảnh tập trung xen kẽ.

Và không bao giờ sử dụng blur()chức năng js. Sử dụng ::-moz-focus-innerlớp giả.

Trong hầu hết các trường hợp mà không thêm !importantmã CSS, nó sẽ không hoạt động.

Vì vậy, đừng quên thêm !important

a, a:active, a:focus{
    outline: none !important; /* Works in Firefox, Chrome, IE8 and above */
}

Hoặc bất kỳ mã nào khác:

button::-moz-focus-inner {
  border: 0 !important;
}

button::-moz-focus-inner { border: 0; }

Ở đâu button có thể là bất cứ bộ chọn CSS nào mà bạn muốn tắt hành vi.

Bạn có thể muốn tăng cường tập trung hơn là thoát khỏi nó.

button::-moz-focus-inner {border: 2px solid transparent;}

button:focus::-moz-focus-inner {border-color: blue} 

Xóa phác thảo chấm từ các liên kết, nút và yếu tố đầu vào.

a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

Nếu bạn có một đường viền trên một nút và muốn ẩn đường viền chấm trong Firefox mà không xóa đường viền (và do đó, nó có chiều rộng thêm trên nút), bạn có thể sử dụng:

.button::-moz-focus-inner {
    border-color: transparent;
}

Mã CSS dưới đây hoạt động để loại bỏ điều này:

a:focus, a:active, 
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

Có vẻ như cách duy nhất để đạt được điều này là bằng cách thiết lập

browser.display.focus_ring_width = 0

trong about: config trên cơ sở mỗi trình duyệt.

Điều này hoạt động trên firefox v-27.0

 .buttonClassName:focus {
  outline:none;
}

Sau khi thử nhiều lựa chọn từ trên, chỉ có những điều sau đây làm việc cho tôi.

*:focus, *:visited, *:active, *:hover  { outline:0 !important;}
*::-moz-focus-inner {border:0;}

Cùng với Bootstrap 3 tôi đã sử dụng mã này. Bộ quy tắc thứ hai chỉ hoàn tác những gì bootstrap làm cho các nút tập trung / hoạt động:

button::-moz-focus-inner {
  border: 0;    /*removes dotted lines around buttons*/
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn:active:focus, .btn:focus{
  outline:0;
}

LƯU Ý rằng tệp css tùy chỉnh của bạn phải xuất hiện sau tệp css Bootstrap trong mã html của bạn để ghi đè lên.

Bạn đừng bỏ lỡ !

button::-moz-focus-inner {
 border: 0 !important;
}

Bạn có thể thử button::-moz-focus-inner {border: 0px solid transparent;}trong CSS của bạn.