it-swarm-id.com

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

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

a:focus { 
    outline: none; 
}

Tetapi bagaimana saya bisa melakukan ini untuk tag <button> 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)

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

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

280

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

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

Tepuk tangan!

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

[Perbarui] Solusi ini tidak berfungsi lagi. Solusi yang bekerja untuk saya adalah yang ini https://stackoverflow.com/a/3844452/92556

Jawaban yang ditandai benar tidak berfungsi dengan Firefox 24.0.

Untuk menghapus garis putus-putus Firefox pada tombol dan tag 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

9
Renato Carvalho

Sudah mencoba sebagian besar jawabannya 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 gaya custom 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;}
7
Vartox

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 menambah sedikit keamanan ekstra & menyegel kesepakatan!

5
Shannon Hochkins

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 set browser.display.focus_ring_width menjadi 0. Maka Firefox tidak akan menampilkan batas bertitik sama sekali.

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

5

Cukup tambahkan css ini untuk kotak pilih

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

Ini bekerja dengan baik untuk saya.

4
Abhay Singh

Diuji pada Firefox 46 dan Chrome 49 menggunakan kode ini.

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

Sebelum (titik-titik putih terlihat)

input with white dots

Setelah (Titik putih tidak terlihat) enter image description here

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

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

Selamat Coding !!

4
Madan Sapkota

Dalam kebanyakan kasus tanpa menambahkan !important ke kode CSS, itu tidak akan berfungsi.

Jadi, jangan lupa menambahkan !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;
}
3
herci

Anda mungkin ingin mengintensifkan fokus daripada menyingkirkannya.

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

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

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;
}
2
Dave Everitt

Sepertinya satu-satunya cara untuk mencapai ini adalah dengan menetapkan

browser.display.focus_ring_width = 0

di about: config berdasarkan per browser.

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

Di mana button dapat menjadi pemilih CSS apa pun yang Anda inginkan untuk menonaktifkan perilaku tersebut.

2
wavded

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 status :focus 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 gunakan fungsi blur() js. Gunakan kelas pseudo ::-moz-focus-inner.

2
Flatline

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

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

Ini akan mendapatkan kontrol rentang:

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

Dari: Hapus garis bertitik dari elemen input rentang di Firefox

2
bob

Yap jangan lewatkan ! Penting

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

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

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

0
usual

Ini berfungsi pada firefox v-27.0

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

Bersama dengan Bootstrap 3 saya menggunakan kode ini. Rangkaian aturan kedua hanya batalkan 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 Bootstrap file css dalam kode html Anda untuk menimpanya.

0
Ehsan88