Semua tombol saya memiliki highlight di sekitarnya setelah saya mengkliknya. Ini ada di Chrome.

<button class="btn btn-primary btn-block">
    <span class="icon-plus"></span> Add Page
</button>

Saya menggunakan Bootstrap dengan tema, tapi saya cukup yakin bukan itu: Saya memperhatikan ini sebelumnya di proyek lain.

Itu hilang jika saya menggunakan <a>tag bukan <button>. Mengapa? Jika saya ingin menggunakan <button>bagaimana saya membuatnya pergi?

Saya menemukan Q dan A ini di halaman lain, dan mengesampingkan gaya fokus tombol bekerja untuk saya. Masalah ini mungkin khusus untuk MacOS dengan Chrome.

.btn:focus {
  outline: none;
  box-shadow: none;
}

Perhatikan bahwa ini memiliki implikasi untuk aksesibilitas dan tidak disarankan hingga Anda memiliki status fokus yang konsisten dan baik untuk tombol dan input Anda. Sesuai komentar di bawah, ada pengguna di luar sana yang tidak dapat menggunakan mouse.

Anda menginginkan sesuatu seperti:

<button class="btn btn-primary btn-block" onclick="this.blur();">...

Metode .blur () benar menghapus sorotan fokus dan tidak mengacaukan gaya Bootstraps.

pemahaman saya adalah bahwa fokus pertama kali diterapkan mengikuti onMouseDownacara, sehingga memanggil e.preventDefault()di onMouseDowndapat menjadi solusi yang bersih tergantung pada kebutuhan Anda. Ini tentu saja merupakan solusi ramah aksesibilitas, tetapi jelas itu menyesuaikan perilaku klik mouse yang mungkin tidak kompatibel dengan proyek web Anda.

Saat ini saya menggunakan solusi ini (dalam suatu react-bootstrapproyek) dan saya tidak menerima flicker fokus atau mempertahankan fokus tombol setelah klik, tetapi saya masih dapat menabrak fokus saya dan secara visual memvisualisasikan fokus tombol yang sama.

Tidak percaya tidak ada yang memposting ini.

Gunakan label, bukan tombol.

<label type="button" class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</label>

Biola

Meskipun mudah untuk hanya menghapus garis besar untuk semua tombol yang difokuskan (seperti dalam jawaban user1933897 ), tetapi solusi itu buruk dari sudut pandang aksesibilitas (misalnya, lihat Berhenti Bergaul dengan Garis Besar Fokus Default Browser )

Di sisi lain, mungkin tidak mungkin meyakinkan browser Anda untuk berhenti mendisain tombol yang diklik sebagai fokus jika berpikir bahwa itu fokus setelah Anda mengkliknya (Saya sedang melihat Anda, Chrome di OS X).

Jadi apa yang bisa kita lakukan? Beberapa pilihan muncul di benak saya.

1) Javascript (jQuery): $('.btn').mouseup(function() { this.blur() })

Anda menginstruksikan browser Anda untuk menghapus fokus di sekitar tombol apa pun segera setelah tombol diklik. Dengan menggunakan mouseupalih-alih clickkami menjaga perilaku default untuk interaksi berbasis keyboard ( mouseuptidak dipicu oleh keyboard).

2) CSS: .btn:hover { outline: 0 !important }

Di sini Anda mematikan garis besar hanya untuk tombol melayang . Jelas itu tidak ideal, tetapi mungkin cukup dalam beberapa situasi.

Ini berhasil untuk saya. Saya membuat kelas khusus yang menimpa CSS yang diperlukan.

.custom-button:focus {
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

-Webkit-box-shadow akan berfungsi untuk Chrome dan browser safari.

Ini bekerja untuk saya, solusi lain yang tidak disebutkan. Lemparkan saja ke event klik ...

$(this).trigger("blur");

Atau telepon dari acara / metode lain ...

$(".btn_name").trigger("blur");

Jika Anda menggunakan aturan :focus { outline: none; }untuk menghapus garis besar, tautan atau kontrol akan menjadi fokus tetapi tanpa indikasi fokus untuk pengguna keyboard. Metode untuk menghapusnya seperti dengan JS onfocus="blur()"bahkan lebih buruk dan akan mengakibatkan pengguna keyboard tidak dapat berinteraksi dengan kontrol.

Peretasan yang dapat Anda gunakan, yang semacam OK , termasuk menambahkan :focus { outline: none; }aturan ketika pengguna berinteraksi dengan mouse dan menghapusnya lagi jika interaksi keyboard terdeteksi. Lindsay Evans telah membuat lib untuk ini: https://github.com/lindsayevans/outline.js

Tetapi saya lebih suka mengatur kelas pada html atau tag tubuh. Dan memiliki kontrol dalam file CSS kapan harus menggunakan ini.

Misalnya (penangan event sebaris hanya untuk tujuan demonstrasi):

<html>
<head>
<style>
  a:focus, button:focus {
    outline: 3px solid #000;
  }
  .no-focus a, .no-focus button {
    outline: none;
  } 
</style>
</head>
<body id="thebody" 
onmousedown="document.getElementById('thebody').classList.add('no-focus');"
onkeydown="document.getElementById('thebody').classList.remove('no-focus');">
    <p>This her is <a href="#">a link</a></p>   
    <button>Click me</button>
</body>
</html>

Saya memang menulis Pena: http://codepen.io/snobojohan/pen/RWXXmp

Namun waspadalah ada masalah kinerja. Hal ini memaksa pengecatan ulang setiap kali pengguna beralih antara mouse dan keyboard. Lebih lanjut tentang Menghindari Cat yang Tidak Perlu http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/

Saya telah memperhatikan hal yang sama dan meskipun itu benar-benar mengganggu saya, saya percaya tidak ada cara yang tepat untuk menangani ini.

Saya akan merekomendasikan terhadap semua solusi lain yang diberikan karena mereka membunuh aksesibilitas tombol sepenuhnya, jadi sekarang, ketika Anda tab ke tombol, Anda tidak akan mendapatkan fokus yang diharapkan.

Ini harus dihindari!

.btn:focus {
  outline: none;
}

Saya menemukan solusinya. ketika kita fokus, bootstrap menggunakan bayangan kotak, jadi kita cukup menonaktifkannya (tidak cukup reputasi, tidak dapat mengunggah gambar :().

saya menambahkan

.btn:focus{
    box-shadow:none !important;
}

berhasil.

OPSI 1: Gunakan :focus-visiblepseudo-class

The :focus-visiblepseudo-class dapat digunakan untuk membunuh garis tak sedap dipandang dan fokus cincin pada tombol dan berbagai elemen untuk pengguna yang tidak menavigasi melalui keyboard (yaitu, melalui sentuhan atau klik mouse).

/** 
 * The default focus style is likely provided by Bootstrap or the browser
 * but here we override everything else with a visually appealing cross-
 * browser solution that works well on all focusable page elements
 * including buttons, links, inputs, textareas, and selects.
 */
*:focus { 
  outline: 0 !important;
  box-shadow:
    0 0 0 .2rem #fff, /* use site bg color to create whitespace for faux focus ring */
    0 0 0 .35rem #069 !important; /* faux focus ring color */
}

/**
 * Undo the above focused button styles when the element received focus
 * via mouse click or touch, but not keyboard navigation.
 */
*:focus:not(:focus-visible) {
  outline: 0 !important;
  box-shadow: none !important;
}

Peringatan: Pada tahun 2020, :focus-visiblepseudo-class tidak didukung secara luas di seluruh browser . Namun, polyfill sangat mudah digunakan; lihat instruksi di bawah ini.

OPSI 2: Gunakan .focus-visiblepolyfill

Solusi ini menggunakan kelas CSS normal dan bukan pseudo-class yang disebutkan di atas, dan memiliki dukungan browser yang luas karena merupakan polyfill berbasis Javascript resmi .

Langkah 1: Tambahkan dependensi Javascript ke halaman HTML Anda

Catatan: polyfill fokus-terlihat memerlukan polyfill tambahan untuk beberapa browser lama yang tidak mendukung classList :

<!-- place this code just before the closing </html> tag -->
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=Element.prototype.classList"></script>
<script src="https://unpkg.com/focus-visible"></script>

Langkah 2: Tambahkan CSS berikut ke stylesheet Anda

Berikut ini adalah versi modifikasi dari solusi CSS yang didokumentasikan lebih teliti di atas.

/**
 * Custom cross-browser styles for keyboard :focus overrides defaults.
 */
*:focus { 
  outline: 0 !important;
  box-shadow:
    0 0 0 .2rem #fff,
    0 0 0 .35rem #069 !important;
}

/**
 * Remove focus styles for non-keyboard :focus.
 */
*:focus:not(.focus-visible) {
  outline: 0 !important;
  box-shadow: none !important;
}

Langkah 3 (opsional): gunakan kelas 'fokus-terlihat' jika perlu

Jika Anda memiliki item di mana Anda ingin menunjukkan cincin fokus ketika seseorang mengklik atau menggunakan sentuhan, maka tambahkan saja focus-visiblekelas ke elemen DOM.

<!-- This example uses Bootstrap classes to theme a button to appear like
     a regular link, and then add a focus ring when the link is clicked --->
<button type="button" class="btn btn-text focus-visible">
  Clicking me shows a focus box
</button>

Sumber:

• https://css-tricks.com/keyboard-only-focus-styles/

Demo:

• https://wicg.github.io/focus-visible/demo/

Jika hal di atas tidak berhasil untuk Anda, coba ini:

.btn: focus {outline: none; box-shadow: none; border: 2px solid transparan;}

Seperti yang ditunjukkan oleh user1933897, ini mungkin khusus untuk MacOS dengan Chrome.

Terlambat, tetapi siapa tahu itu bisa membantu seseorang. CSS akan terlihat seperti:

.rhighlight{
   outline: none !important;
   box-shadow:none
}

HTML akan terlihat seperti:

<button type="button" class="btn btn-primary rHighlight">Text</button> 

Dengan cara ini Anda dapat menjaga btn dan perilaku yang terkait.

Saya menyebutkan hal ini dalam komentar di atas, tetapi perlu dicantumkan sebagai jawaban terpisah untuk kejelasan. Selama Anda tidak perlu benar-benar fokus pada tombol, Anda dapat menggunakan acara fokus untuk menghapusnya sebelum dapat menerapkan efek CSS:

$('buttonSelector').focus(function(event) {
    event.target.blur();
});

Ini menghindari flicker yang dapat dilihat saat menggunakan event klik. Ini memang membatasi antarmuka, dan Anda tidak akan bisa menabrak tombol, tetapi itu bukan masalah di semua aplikasi.

Gaya

.not-focusable:focus {
    outline: none;
    box-shadow: none;
}

Menggunakan

<button class="btn btn-primary not-focusable">My Button</button>

Coba solusi ini untuk menghilangkan batas di sekitar tombol. Tambahkan kode ini di css.

Mencoba

button:focus{
outline:0px;
}

Jika tidak berfungsi, gunakan di bawah ini.

button:focus{
 outline:none !important;
 }

Bagi orang yang menginginkan cara css murni untuk melakukan itu:

:focus:not(:focus-visible) { outline: none }

Ini juga bisa berfungsi untuk tautan dan sebagainya, dan bonus, itu menjaga aksesibilitas keyboard. Terakhir itu diabaikan oleh browser yang tidak mendukung: fokus-terlihat

Kami mengalami masalah serupa dan memperhatikan bahwa Bootstrap 3 tidak memiliki masalah pada tab mereka (di Chrome). Sepertinya mereka menggunakan gaya garis besar yang memungkinkan peramban untuk memutuskan apa yang terbaik untuk dilakukan dan Chrome tampaknya melakukan apa yang Anda inginkan: perlihatkan garis besar ketika fokus kecuali Anda mengklik elemen tersebut.

Dukungan untuk outline-stylesulit dijabarkan karena browser dapat memutuskan apa artinya itu. Terbaik untuk memeriksa di beberapa browser dan memiliki aturan back-back.

Solusi lain yang mungkin adalah menambahkan kelas menggunakan pendengar Javascript ketika pengguna mengklik tombol dan kemudian menghapus kelas itu fokus dengan pendengar lain. Ini menjaga aksesibilitas (tabbing terlihat) sambil juga mencegah perilaku unik Chrome dalam mempertimbangkan tombol yang difokuskan saat diklik.

JS:

$('button').click(function(){
    $(this).addClass('clicked');
});
$('button').focus(function(){
    $(this).removeClass('clicked');
});

CSS:

button:focus {
    outline: 1px dotted #000;
}
button.clicked {
    outline: none;
}

Contoh lengkap di sini: https://jsfiddle.net/4bbb37fh/

Ini berhasil, saya harap membantu Anda

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

.btn:focus:active {
  outline: none;
}

ini menghilangkan garis besar pada klik, tetapi tetap fokus saat menabrak (untuk a11y)

Ini yang terbaik

.btn-primary.focus, .btn-primary:focus {
-webkit-box-shadow: none!important;
box-shadow: none!important;
}

  .btn:focus,.btn:active, a{
        outline: none !important;
        box-shadow: none;
     }

garis besar ini: tidak ada yang berfungsi untuk tombol dan tag

Tambahkan ini dalam CSS:

*, ::after, ::before {
    box-sizing: border-box;
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

Saya menemukan solusi cukup tambahkan baris di bawah ini dalam kode css Anda.

button:focus { outline: none }

Saya baru saja mengalami masalah yang sama pada MacOS dan Chrome saat menggunakan tombol untuk memicu acara "transisi". Jika ada orang yang membaca ini sudah menggunakan pendengar acara, Anda dapat menyelesaikannya dengan menelepon .blur()setelah tindakan Anda.

Contoh:

 nextQuestionButtonEl.click(function(){
    if (isQuestionAnswered()) {
        currentQuestion++;
        changeQuestion();
    } else {
        toggleNotification("invalidForm");
    }
    this.blur();
});

Meskipun jika Anda belum menggunakan pendengar acara, menambahkan satu hanya untuk menyelesaikan ini mungkin menambahkan overhead yang tidak perlu dan solusi gaya seperti jawaban sebelumnya memberikan lebih baik.

Anda bisa mengatur tabIndex="-1". Ini akan membuat browser untuk melewati tombol ini ketika Anda TAB melalui kontrol yang dapat fokus.

"Perbaikan" lain yang disarankan di sini, hanya menghapus garis besar fokus, tetapi masih menyisakan tombol. Namun, dari sudut pandang kegunaan, Anda sudah menghapus cahaya, jadi pengguna Anda tidak akan tahu tombol apa yang saat ini fokus.

Di sisi lain, membuat tombol tidak dapat ditabrak memiliki implikasi aksesibilitas.

Saya menggunakannya untuk menghapus garis fokus dari tombol X di bootstrap modal, yang memiliki duplikat tombol "Tutup" di bagian bawah dengan cara apa pun, jadi solusi saya tidak berdampak pada aksesibilitas.

Jika Anda menggunakan browser webkit (dan berpotensi browser yang kompatibel dengan awalan vendor webkit), garis besar itu milik -webkit-focus-ringpseudoclass tombol . Cukup setel outlineke none:

*:-webkit-focus-ring {
  outline: none;
}

Chrome adalah seperti browser webkit, dan efek ini terjadi di Linux juga (bukan hanya MacOS hal, meskipun beberapa gaya Chrome adalah MacOS saja)

Saya mengalami masalah yang sama menggunakan <a>akting sebagai tombol dan saya menemukan saya kehilangan solusi dengan menambahkan ATTR type="button"membuatnya berperilaku normal untuk saya setidaknya.

<a type="button" class="btn btn-primary">Release Me!</a>

langsung di tag html (dalam skenario di mana Anda mungkin ingin meninggalkan tema bootstrap di tempat lain di desain Anda) ..

contoh untuk dicoba ..

<button style="border: transparent;">

<button style="border: 1px solid black;">

.. dll ,. tergantung pada efek yang diinginkan.