it-swarm-vi.tech

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 phác thảo tiêu điểm xấu xí trên liên kết Với cái này:

a:focus { 
    outline: none; 
}

Nhưng làm thế nào tôi có thể làm điều này cho các thẻ <button>? 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í)

459
Edward Tanguay
button::-moz-focus-inner {
  border: 0;
}
686
user27656

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

280
Anderson Custódio

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 : 0px;
    } 
/*for IE8 */
    input[type="submit"]:focus, input[type="button"]:focus
    {     
        outline : none; 
    }
46
chinkchink

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!

42
foxybagga
:focus, :active {
    outline: 0;
    border: 0;
}
22
blizzyx

[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/92556

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

9
Renato Carvalho

Đã 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;}
7
Vartox

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!

5
Shannon Hochkins

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.

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

5
Vitaly Sharovatov

Đơ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.

4
Abhay Singh

Đã 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)

input with white dots

Sau (Các chấm trắng là vô hình) enter image description here

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 !!

4
Madan Sapkota

Trong hầu hết các trường hợp mà không thêm !important vào mã 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;
}
3
herci

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} 
2
John

Nếu bạn có đường viền trên nút và muốn ẩn đường viền chấm trong Firefox không có 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;
}
2
Dave Everitt

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.

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

Trong đó button có thể là bất kỳ bộ chọn CSS nào mà bạn muốn tắt hành vi.

2
wavded

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 trạng thái :focus vào nút thay thế điều 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ẽ.

không bao giờ sử dụng hàm blur() js. Sử dụng lớp giả ::-moz-focus-inner.

2
Flatline

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;
}
2
kurumkan

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;
}
2
Fizer Khan

Đ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;
}

Từ: Xóa phác thảo chấm từ phần tử đầu vào phạm vi trong Firefox

2
bob

Bạn đừng bỏ lỡ ! Quan trọng

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

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;}
0
Waqas Bukhary

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

0
usual

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

 .buttonClassName:focus {
  outline:none;
}
0
star18bit

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 sẽ xuất hiện sau tệp css Bootstrap trong mã html của bạn để ghi đè lên.

0
Ehsan88