tombol bootstrap menunjukkan garis biru ketika diklik

Saya menambahkan ini tetapi tetap garis biru muncul ketika tombol diklik.

.btn:focus {
  outline: none;
}

bagaimana cara menghapus benda jelek itu?

Mungkin properti Anda semakin ditimpa. Coba lampirkan !importantkode Anda bersama dengan: aktif.

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

Juga tambahkan bayangan kotak karena jika tidak Anda masih akan melihat tombol bayangan di sekitar.

Meskipun ini bukan praktik yang baik untuk digunakan! Penting Saya sarankan Anda menggunakan kelas yang lebih spesifik dan kemudian mencoba menerapkan css dengan menggunakan! Penting ...

Dalam versi terbaru Bootstrap, saya menemukan menghapus garis itu sendiri tidak berfungsi. Dan saya harus menambahkan ini karena ada juga bayangan kotak:

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

Ada kelas boostrap bawaan shadow-noneuntuk menonaktifkan box-shadow(tidak outline) ( https://getbootstrap.com/docs/4.1/utilities/shadows/ ). Ini menghapus bayangan tombol:

<button class='btn btn-primary shadow-none'>Example button</button>

Coba Kode Di Bawah Ini

.button:active, 
 button:active,
.button:focus, 
 button:focus,
.button:hover, 
 button:hover{
    border:none !important;
    outline:none !important;
}

Ini terjadi pada saya di Chrome (walaupun tidak di Firefox). Saya telah menemukan bahwa outlineproperti sedang diset oleh Bootstrap sebagai outline: 5px auto -webkit-focus-ring-color;. Dipecahkan dengan mengganti outlineproperti nanti di CSS khusus saya sebagai berikut:

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

ini akan menyelesaikan tombol dengan teks, tombol hanya ikon atau tombol adalah tautan:

 <!--1. button with a text -->
 <button type="button" class="btn btn-success" id="newWord">Save</button>

 <!--2. button only with a close icon -->
 <button type="button" class="close"></button>

 <!--3. button is a link -->
 <a class="btn btn-success btn-xs" href="#">Save</a>



button,
button:active,
button:focus, 
button:hover,
.btn,
.btn:active, 
.btn:focus, 
.btn:hover{   
    outline:none !important;
}

jika Anda menambahkan border:none !important;

{
    border:none !important;
    outline:none !important;
}

maka ukuran tombol akan menjadi lebih kecil saat diklik.

Coba ini

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

Di Bootstrap 4 mereka gunakan box-shadow: 0 0 0 0px rgba(0,123,255,0);pada: fokus, dan saya memecahkan masalah saya dengan

a.active.focus,
a.active:focus,
a.focus,
a:active.focus,
a:active:focus,
a:focus,
button.active.focus,
button.active:focus,
button.focus,
button:active.focus,
button:active:focus,
button:focus,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
    outline: 0;
    outline-color: transparent;
    outline-width: 0;
    outline-style: none;
    box-shadow: 0 0 0 0 rgba(0,123,255,0);
}

Bahkan setelah menghapus garis besar dari tombol dengan menetapkan nilainya ke 0, Masih ada perilaku lucu pada tombol ketika diklik, ukurannya sedikit menyusut. Jadi saya datang dengan solusi optimal:

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

Semoga ini membantu...

Anda perlu menggunakan sarang yang tepat dan kemudian menerapkan gaya padanya.

• Klik kanan pada tombol dan cari kelas yang tepat untuk menggunakannya (Periksa elemen menggunakan pembakar untuk firefox), (periksa elemen untuk chrome).

• Tambahkan gaya ke seluruh kelas. Hanya kemudian itu akan berhasil

Saya menemukan ini sangat berguna dalam kasus saya setelah klik tombol.

$('#buttonId').blur();

Saya memilih untuk hanya menghapus lebar perbatasan :focus. Ini menghilangkan ruang jelek antara garis besar dan sudut bulat tombol. Untuk beberapa alasan masalah ini hanya terjadi pada elemen tombol aktual dan bukan <a class="btn">elemen.

button.btn:focus {
  border-width: 0;
}

Ini dapat membantu jika seseorang masih memiliki pertanyaan ini yang belum terselesaikan.

(function() {
  $('button').on('click', function() {
    $("#action").html("button was clicked");
    console.log("the button was clicked");
  });
})();

.btn-clear {
  background-color: transparent !important;
  border-style: none !important;
  cursor: pointer;
}

.btn-clear:active,
.btn-clear:focus {
  outline-style: none !important;
  outline-color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- this button has default style -->
<button>Action</button>
<!-- this button is clear of style -->
<button class="btn-clear">Action</button>

<label id="action"></label>

Inilah solusi Boostrap 4 saya untuk menghapus garis tombol

/*
* Boostrap 4
* Remove blue outline from button
*/

.btn:focus,
.btn:active {
  box-shadow: none;
}

Saya baru saja mengalami masalah yang sama dan kode berikut berfungsi untuk saya:

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

.btn {
  margin:32px;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->




<button type="button" class="btn btn-default">Button</button>

Berharap itu akan membantu!

Sebenarnya dalam bootstrap didefinisikan semua variabel untuk semua kasus. Dalam kasus Anda, Anda hanya perlu mengganti variabel default '$ input-btn-focus-box-shadow' dari file '_variables.scss'. Seperti itu: $input-btn-focus-box-shadow: none; Perhatikan bahwa Anda perlu menimpa variabel itu di kustom Anda sendiri '_yourCusomVarsFile.scss'. Dan file itu harus diimpor dalam proyek dalam urutan pertama dan kemudian bootstrap seperti:

@import "yourCusomVarsFile";
@import "bootstrap/scss/bootstrap";
@import "someOther";

Bootstraps vars disertai dengan flag '! Default'.

$input-focus-box-shadow: $input-btn-focus-box-shadow !default;

Jadi di file Anda, Anda akan menimpa nilai default. Berikut ilustrasinya:

$input-focus-box-shadow: none;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;

Var pertama memiliki prioritas lebih dari var kedua. Hal yang sama berlaku untuk negara bagian dan kasus lainnya. Semoga ini bisa membantu Anda.

Berikut ini adalah file '_variable.scss' dari repo, tempat Anda dapat menemukan semua nilai inisial dari bootstrap: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss

Chears

a:focus {
  outline: none;
}

ini bekerja untuk saya di BS3

Yang ini berhasil untuk saya di Bootstrap 4:

.btn {border-color: transparent;}

Mencoba

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

Perlu diingat, jika tombol Anda berada di dalam jangkar seperti:

<a href='some_link'>
    <button class='btn'>Button</button>
</a>

Menambahkan gaya ke tombol itu sendiri mungkin tidak cukup, Anda mungkin perlu menambahkan a:focus, a:active { outline: none }aturan CSS yang sesuai (ini bekerja untuk saya).

Coba di bawah ini

.bootstrap-select .dropdown-toggle:focus 
 {
          outline: 0 !important;
 }

Terkadang {outline: 0}tidak menyelesaikan masalah dan kita bisa mencoba{box-shadow: none;}

Saya menggunakan bootstrap 4, Anda dapat menggunakan garis dan bayangan kotak.

#buttonId {
    box-shadow: none;
    outline: none;
}

Atau jika tombol ada di dalam elemen seperti div tanpa back-ground, bayangan kotak sudah cukup.

#buttonId {
     box-shadow: none;
}

Contoh: https://codepen.io/techednelson/pen/XRwgRB

Jika Anda menggunakan versi 4.3 atau lebih tinggi, kode Anda tidak akan berfungsi dengan baik. Inilah yang saya gunakan. Ini berhasil untuk saya.

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

Alih-alih menargetkan pada tombol kelas ( .btn ), di sini saya menargetkan elemen tombol itu sendiri dan berfungsi untuk saya.

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

Dan bisa menggunakan shadow-noneclass untuk input field

Berikut adalah metode non-CSS. Menggunakan JQuery, cukup hapus kelas "fokus" setiap kali elemen telah diklik.

$(".btn").mousemove(function(element) { $(this).removeClass("focus"); });

Metode ini dapat menyebabkan perbatasan menjadi ada dan kemudian mundur sebentar, yang menurut saya tidak buruk (sepertinya bagian dari respons ketika tombol diklik).

Alasan saya menggunakan .mousemove () adalah .click () dan .mouseup () keduanya terbukti tidak efektif.

Mengubah nilai-nilai ini berhasil bagi saya. Saya menemukannya dengan melihat Alat Pengembang Chrome

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: /*Change This*/;
    border-color: /*Change This*/;
}

Ini mempertahankan bayangan tombol juga, itu hanya mengubah warna tombol saat diklik.

Ganti pernyataan bootstrap yang tepat:

.btn-primary.focus, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus{
 box-shadow: none;
}

Ubah Border Color kembali ke Gray

.btn:focus,
.btn:active{
 border: 1px solid #ced4da !important;
}

Cara SCSS untuk semua elemen (tidak hanya tombol):

body {
  * {
    &:focus, &.focus,
    &:active, &.active {
      outline: transparent none 0 !important;
      box-shadow: 0 0 0 0 rgba(0,123,255,0) !important;
      -webkit-box-shadow: none !important;
    }
  }
}