Hapus batas biru dari tombol bergaya css di Chrome

Saya sedang mengerjakan halaman web, dan saya ingin <button>tag bergaya khusus . Jadi dengan CSS, aku berkata: border: none. Sekarang ini berfungsi dengan baik di safari, tetapi di chrome, ketika saya mengklik salah satu tombol, itu menempatkan perbatasan biru yang mengganggu di sekitarnya. Saya berpikir button:active { outline: none }atau button:focus { outline:none }akan bekerja, tetapi tidak juga. Ada ide?

Ini terlihat seperti sebelum diklik (dan bagaimana saya ingin tetap terlihat setelah diklik):

Dan ini adalah perbatasan yang saya bicarakan:

Inilah CSS saya:

button.launch {
    background-color: #F9A300;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.launch:hover {
    cursor: pointer;
    background-color: #FABD44;
}

button.change {
    background-color: #F88F00;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.change:hover {
    cursor: pointer;
    background-color: #F89900;
}

button:active {
    outline: none;
    border: none;
}

Melakukan hal ini tidak disarankan karena akan mengurangi aksesibilitas situs Anda; untuk info lebih lanjut, lihat posting ini .

Yang mengatakan, jika Anda bersikeras, CSS ini harus bekerja:

button:focus {outline:0;}

Lihat atau JSFiddle: http://jsfiddle.net/u4pXu/

Atau dalam cuplikan ini:

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.change {
background-color: #F88F00;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.change:hover {
cursor: pointer;
background-color: #F89900;
}

button:active {
outline: none;
border: none;
}

button:focus {outline:0;}

<button class="launch">Launch with these ads</button> 
<button class="change">Change</button>

Tunggu! Ada alasan untuk garis jelek itu!

Sebelum menghapus garis biru jelek itu, Anda mungkin ingin mempertimbangkan aksesibilitas . Secara default, garis biru itu ditempatkan pada elemen yang bisa fokus. Ini agar pengguna dengan masalah aksesibilitas dapat memfokuskan tombol itu dengan menabraknya. Beberapa pengguna tidak memiliki keterampilan motorik untuk menggunakan mouse dan hanya menggunakan keyboard (atau perangkat input lain) untuk interaksi komputer. Saat Anda menghapus garis biru, tidak ada lagi indikator visual tentang elemen apa yang difokuskan. Jika Anda akan menghapus garis biru, Anda harus menggantinya dengan jenis indikasi visual lain bahwa tombolnya terfokus.

Kemungkinan Solusi: Gelapkan Tombol saat fokus

Untuk contoh di bawah, garis biru Chrome pertama kali dihapus dengan menggunakan button:focus { outline:0 !important; }

Berikut adalah tombol Bootstrap dasar Anda seperti yang muncul secara normal:

Berikut adalah tombol ketika mereka menerima fokus:

Di sini tombol saat ditekan:

Seperti yang Anda lihat, tombolnya sedikit lebih gelap ketika menerima fokus. Secara pribadi, saya akan merekomendasikan untuk membuat tombol fokus lebih gelap sehingga ada perbedaan yang sangat mencolok antara keadaan fokus dan keadaan normal tombol.

Ini bukan hanya untuk pengguna yang dinonaktifkan

Membuat situs Anda lebih mudah diakses adalah sesuatu yang sering diabaikan tetapi dapat membantu menciptakan pengalaman yang lebih produktif di situs web Anda. Ada banyak pengguna normal yang menggunakan perintah keyboard untuk bernavigasi melalui situs web untuk tetap menggunakan keyboard.

Saya hanya menghapus garis besar dari semua tag di halaman dengan memilih semua dan menerapkan garis besar: tidak ada untuk semuanya :)

*:focus {outline:none}

Seperti yang disebutkan bagofcole, Anda mungkin perlu menambahkan! Penting juga, sehingga gayanya akan terlihat seperti ini:

*:focus {outline:none !important}

Dalam contoh saya tentang masalah ini saya harus menentukan box-shadow: none

button:focus {
  outline:none;
  box-shadow: none;
}

Jangan lupa !importantdeklarasi, untuk hasil yang lebih baik

button:focus {outline:0 !important;}

Aturan yang memiliki properti! Penting akan selalu diterapkan di mana pun aturan itu muncul dalam dokumen CSS.

Menghapus outlineitu mengerikan untuk aksesibilitas! Idealnya, cincin fokus hanya muncul ketika pengguna berniat untuk menggunakan keyboard .

Gunakan : fokus-terlihat . Saat ini proposal W3C untuk menata fokus hanya keyboard menggunakan CSS, dan didukung di Firefox ( caniuse ). Sampai browser besar lainnya mendukungnya, Anda dapat menggunakan polyfill yang kuat ini .

/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
  outline: none;
}

/* Optional: Customize .focus-visible */
.focus-visible {
  outline-color: lightgreen;
}

Saya juga menulis posting yang lebih rinci kalau-kalau Anda membutuhkan info lebih lanjut.

Tambahkan ini dalam file CSS Anda.

*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

Gunakan ini:

:active {
    outline:none;
}

atau ini jika itu tidak berhasil:

:active {
   outline:none !important;
}

Ini berfungsi untuk saya (setidaknya FF dan Chrome). Alih-alih menargetkan :focusnegara, hanya menargetkan :activenegara dan yang akan menghapus sorotan mencolok estetika di browser Anda ketika pengguna mengklik tautan. Tapi itu masih akan mempertahankan status fokus ketika pengguna dengan cacat tab atau shift-tab melalui halaman. Kedua belah pihak senang. :)

untuk masalah ini:

Gunakan ini:

   *{
         -webkit-tap-highlight-color: rgba(0,0,0,0);
         -webkit-tap-highlight-color: transparent; /* For some Androids */
    }

hasil:

Bagi siapa pun yang menggunakan Bootstrap dan mengalami masalah ini, mereka menggunakan: active: focus serta just: active dan: focus sehingga Anda akan memerlukan:

element:active:focus {
    outline: 0;
}

Mudah-mudahan menyelamatkan seseorang beberapa saat untuk menemukan yang keluar, membenturkan kepalaku sedikit bertanya-tanya mengapa hal sederhana seperti itu tidak berhasil.

Sebagian besar solusi tidak akan berfungsi jika Anda menggunakan Bootstrap 4.1 dan mungkin versi lainnya. Setelah banyak membenturkan kepala, saya menemukan Anda perlu menerapkan kelas shadow-none :

<button class="btn shadow-none">Bootstrap (4.1) button without shadow</button>

Inilah yang bekerja untuk saya:

button:focus {
    box-shadow:none;
}

Perbaikan untuk Chrome dan browser lainnya

button:focus { outline: none !important; box-shadow: none !important; }

coba kode ini untuk semua elemen yang memiliki masalah batas biru

*{
outline: none;
}

atau

*{
outline-style: none;
}

Cara lain untuk memecahkan masalah aksesibilitas yang belum disebutkan di sini adalah melalui sedikit Javascript . Kredit pergi dari blogpost penuh wawasan ini dari hackernoon: https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2

Pendekatan di sini sangat sederhana namun efektif: Menambahkan kelas ketika orang-orang mulai menggunakan tab-key untuk menavigasi halaman (dan secara opsional menghapusnya ketika beralih ke mouse lagi. Kemudian Anda dapat menggunakan kelas ini untuk menampilkan garis fokus atau tidak .

function handleFirstTab(e) {
    if (e.keyCode === 9) { // the "I am a keyboard user" key
        document.body.classList.add('user-is-tabbing');
        window.removeEventListener('keydown', handleFirstTab);
    }
}

window.addEventListener('keydown', handleFirstTab);

Saya menghadapi masalah yang sama jadi saya menggunakan CSS- sederhana

.custom-button {
    outline: none
}

Jika Anda ingin menghapus efek yang sama pada input, Anda bisa menambahkan kode berikut ini juga tombol.

input:focus {outline:0;}

Sampai semua browser modern akan mulai mendukung css-selector : focus-visible ,
cara termudah dan mungkin terbaik untuk menghemat aksesibilitas adalah dengan menghapus fokus rumit ini hanya untuk pengguna mouse dan menyimpannya untuk pengguna keyboard :

1.Gunakan polyfill mungil ini (sekitar 10kb): https://github.com/WICG/focus-visible
2.Tambahkan kode selanjutnya di suatu tempat di css Anda:

.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

Dukungan browser css4-selector: fokus-terlihat sekarang sangat lemah:
https://caniuse.com/#search=focus-visible

Cukup tulis outline:none;. Tidak perlu menggunakan elemen pseudofocus

Ini merupakan masalah dalam keluarga Chrome dan telah ada di sana selamanya.

Bug telah muncul https://bugs.chromium.org/p/chromium/issues/detail?id=904208

Itu dapat ditampilkan di sini: https://codepen.io/anon/pen/Jedvwj segera setelah Anda menambahkan perbatasan untuk apa pun seperti tombol (misalnya role = "tombol" telah ditambahkan ke tag misalnya) Chrome mengacaukan dan mengatur status fokus saat Anda mengklik dengan mouse Anda.

Saya sangat merekomendasikan menggunakan perbaikan ini: https://github.com/wicg/focus-visible .

Lakukan saja yang berikut ini

npm install --save focus-visible

Tambahkan skrip ke html Anda:

<script src="/node_modules/focus-visible/dist/focus-visible.min.js"></script>

atau impor ke file entri utama Anda jika menggunakan webpack atau yang serupa:

import 'focus-visible/dist/focus-visible.min';

lalu letakkan ini di file css Anda:

// hide the focus indicator if element receives focus via mouse, but show on keyboard focus (on tab).
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

// Define a strong focus indicator for keyboard focus.
// If you skip this then the browser's default focus indicator will display instead
// ideally use outline property for those users using windows high contrast mode
.js-focus-visible .focus-visible {
  outline: magenta auto 5px;
}

Anda bisa mengatur:

button:focus {outline:0;}

tetapi jika Anda memiliki banyak pengguna, Anda merugikan mereka yang tidak dapat menggunakan mouse atau mereka yang hanya ingin menggunakan keyboard mereka untuk kecepatan.

Saya memiliki masalah yang sama dengan bootstrap. Saya memecahkan dengan garis besar dan bayangan kotak

.btn:focus, .btn.focus {
    outline: none !important;
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0) !important; // or none
}