Bagaimana cara menghapus garis putus-putus Firefox pada BUTTONS serta tautan?

Saya dapat membuat Firefox tidak menampilkan garis putus-putus fokus yang buruk pada tautan dengan ini:

a:focus { 
    outline: none; 
}

Tetapi bagaimana saya bisa melakukan ini untuk <button>tag juga? Ketika saya melakukan ini:

button:focus { 
    outline: none; 
}

tombol masih memiliki garis fokus bertitik ketika saya mengkliknya.

(dan ya, saya tahu ini adalah masalah kegunaan, tapi saya ingin memberikan petunjuk fokus saya sendiri yang sesuai dengan desain dan bukan titik abu-abu jelek)

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

Tidak perlu menentukan pemilih.

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

Namun, ini melanggar praktik terbaik aksesibilitas dari W3C. Garis besarnya ada untuk membantu mereka yang menavigasi dengan keyboard.

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

Jika Anda lebih suka menggunakan CSS untuk menyingkirkan garis bertitik:

/*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; 
    }

Di bawah ini berfungsi untuk saya dalam kasus LINK, berpikir untuk berbagi - jika seseorang tertarik.

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

Bersulang!

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

[Perbarui] Solusi ini tidak berfungsi lagi. Solusi yang berhasil bagi saya adalah yang ini https://stackoverflow.com/a/3844452/925560

Jawaban yang ditandai benar tidak berfungsi dengan Firefox 24.0.

Untuk menghapus garis putus-putus Firefox pada tombol dan jangkar, saya menambahkan kode di bawah ini:

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

Saya menemukan solusinya di sini: http://aghoshb.com/articles/css-how-to-remove-firefoxs-dotted-outline-on-buttons-and-anchor-tags.html

Sudah mencoba sebagian besar jawaban di sini, tetapi tidak ada yang bekerja untuk saya. Ketika saya menyadari bahwa saya harus menyingkirkan garis biru pada tombol di Chrome juga, saya menemukan solusi lain. Hapus batas biru dari tombol bergaya css di Chrome

Kode ini berfungsi untuk saya di Firefox versi 30 di Windows 7. Mungkin ini bisa membantu orang lain di luar sana :)

button:focus {outline:0 !important;}

Tidak ada cara untuk menghapus fokus bertitik ini di Firefox menggunakan CSS.

Jika Anda memiliki akses ke komputer tempat aplikasi web Anda bekerja, buka about: config di Firefox dan atur browser.display.focus_ring_widthke 0. Kemudian Firefox tidak akan menampilkan batas bertitik sama sekali.

Bug berikut ini menjelaskan topik: https://bugzilla.mozilla.org/show_bug.cgi?id=74225

Ada banyak solusi yang ditemukan di web untuk ini, banyak di antaranya berfungsi, tetapi untuk memaksakan ini, sehingga sama sekali tidak ada yang dapat menyorot / fokus setelah menggunakan yang berikut ini:

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

Ini hanya menambahkan sedikit keamanan ekstra & menyegel kesepakatan!

Ini akan mendapatkan kontrol rentang:

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

Dari: Hapus garis putus-putus dari elemen input rentang di Firefox

Diuji pada Firefox 46 dan Chrome 49 menggunakan kode ini.

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

Sebelum (titik-titik putih terlihat)

Setelah (Titik putih tidak terlihat)

Jika Anda ingin menerapkan hanya pada beberapa bidang input, tombol, dll. Gunakan kode yang lebih spesifik.

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

Selamat Coding !!

Cukup tambahkan css ini untuk kotak pilih

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

Ini bekerja dengan baik untuk saya.

Saya pikir Anda harus benar-benar tahu apa yang Anda lakukan dengan menghapus garis fokus, karena dapat mengacaukannya untuk navigasi dan aksesibilitas keyboard.

Jika Anda perlu mengeluarkannya karena masalah desain, tambahkan :focusstatus ke tombol yang menggantikan ini dengan beberapa isyarat visual lainnya, seperti, mengubah perbatasan menjadi warna yang lebih cerah atau sesuatu seperti itu.

Kadang-kadang saya merasa perlu untuk mengambil garis besar yang menjengkelkan itu, tetapi saya selalu menyiapkan isyarat visual fokus alternatif.

Dan tidak pernah menggunakan blur()fungsi js. Gunakan ::-moz-focus-innerkelas pseudo.

Dalam kebanyakan kasus tanpa menambahkan !importantkode CSS, itu tidak akan berfungsi.

Jadi, jangan lupa tambahkan !important

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

Atau kode lain:

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

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

Di mana buttonada pemilih CSS apa pun yang Anda inginkan untuk menonaktifkan perilaku tersebut.

Anda mungkin ingin mengintensifkan fokus daripada menyingkirkannya.

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

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

Hapus garis putus-putus dari tautan, tombol, dan elemen input.

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

Jika Anda memiliki perbatasan pada tombol dan ingin menyembunyikan garis putus-putus di Firefox tanpa menghapus perbatasan (dan karenanya lebar tambahan pada tombol) Anda dapat menggunakan:

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

Kode CSS di bawah berfungsi untuk menghapus ini:

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

Sepertinya satu-satunya cara untuk mencapai ini adalah dengan menetapkan

browser.display.focus_ring_width = 0

di about: config berdasarkan per browser.

Ini berfungsi pada firefox v-27.0

 .buttonClassName:focus {
  outline:none;
}

Setelah mencoba banyak pilihan di atas, hanya yang berikut ini yang berfungsi untuk saya.

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

Bersama dengan Bootstrap 3 saya menggunakan kode ini. Rangkaian aturan kedua hanya membatalkan apa yang dilakukan bootstrap untuk tombol fokus / aktif:

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

Perhatikan bahwa file css khusus Anda harus muncul setelah file Bootstrap css dalam kode html Anda untuk menimpanya.

Yap jangan lewatkan ! Penting

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

Anda dapat mencoba button::-moz-focus-inner {border: 0px solid transparent;}di CSS Anda.