przycisk bootstrap pokazuje niebieski kontur po kliknięciu

Dodałem to, ale nadal pojawia się niebieski kontur po kliknięciu przycisku.

.btn:focus {
  outline: none;
}

jak usunąć tę brzydką rzecz?

Być może Twoje właściwości zostaną zastąpione. Spróbuj dołączyć !importantdo swojego kodu wraz z: active.

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

Dodaj także cień pola, ponieważ w przeciwnym razie nadal będziesz widzieć cień wokół przycisku.

Chociaż nie jest to dobra praktyka w użyciu! Important, sugeruję użycie bardziej specyficznej klasy, a następnie spróbuj zastosować css z użyciem! Important ...

Istnieją wbudowane klasy boostrap shadow-nonedo wyłączania box-shadow(nie outline) ( https://getbootstrap.com/docs/4.1/utilities/shadows/ ). To usuwa cień przycisku:

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

W najnowszej wersji Bootstrap odkryłem, że samo usuwanie konturu nie działa. I muszę to dodać, ponieważ jest też box-shadow:

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

Spróbuj poniżej kodu

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

Przydarzyło mi się to w przeglądarce Chrome (choć nie w przeglądarce Firefox). Dowiedziałem się, że outlinewłaściwość jest ustawiana przez Bootstrap jako outline: 5px auto -webkit-focus-ring-color;. Rozwiązany przez nadpisanie outlinewłaściwości później w moim niestandardowym CSS w następujący sposób:

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

to rozwiąże przycisk z tekstem, przycisk tylko z ikoną lub przycisk to link:

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

jeśli dodasz border:none !important;

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

wtedy przycisk stanie się mniejszy po kliknięciu.

Spróbuj tego

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

W Bootstrap 4 używają box-shadow: 0 0 0 0px rgba(0,123,255,0);on: focus, si i rozwiązałem mój problem

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

Może to pomóc, jeśli ktoś nadal ma nierozwiązane pytanie.

(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>

Właśnie miałem ten sam problem i działał dla mnie następujący kod:

.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>

Mam nadzieję, że to pomoże!

Nawet po usunięciu konturu z przycisku poprzez ustawienie jego wartości na 0, przycisk nadal zachowuje się dziwnie po kliknięciu, jego rozmiar nieco się zmniejsza. Wymyśliłem więc optymalne rozwiązanie:

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

Mam nadzieję że to pomoże...

Musisz użyć odpowiedniego zagnieżdżenia, a następnie zastosować do niego style.

• Kliknij prawym przyciskiem myszy przycisk i znajdź dokładne zagnieżdżenie klas za pomocą (Sprawdź element za pomocą firebuga dla firefoxa), (sprawdź element pod kątem chrome).

• Dodaj styl całej klasie. Tylko wtedy to zadziała

Znalazłem to całkiem przydatne w moim przypadku po kliknięciu przycisku.

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

Zdecydowałem się po prostu usunąć szerokość obramowania :focus. To usuwa brzydką przestrzeń między konturem a zaokrąglonymi rogami przycisku. Z jakiegoś powodu ten problem występuje tylko w przypadku rzeczywistych elementów przycisku, a nie <a class="btn">elementów.

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

Oto moje rozwiązanie Boostrap 4, aby usunąć kontur przycisku

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

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

Właściwie w bootstrapie są zdefiniowane wszystkie zmienne dla wszystkich przypadków. W twoim przypadku wystarczy zastąpić domyślną zmienną „$ input-btn-focus-box-shadow” z pliku „_variables.scss”. Na przykład: $input-btn-focus-box-shadow: none; pamiętaj, że musisz nadpisać tę zmienną we własnym niestandardowym pliku „_yourCusomVarsFile.scss”. I ten plik należy zaimportować do projektu w pierwszej kolejności, a następnie załadować w następujący sposób:

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

Zmienne bootstraps są oznaczone flagą '! Default'.

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

Więc w swoim pliku zastąpisz wartości domyślne. Oto ilustracja:

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

Pierwsza zmienna ma wyższy priorytet niż druga. To samo dotyczy pozostałych stanów i przypadków. Mam nadzieję, że to ci pomoże.

Oto plik „_variable.scss” z repozytorium, w którym można znaleźć wszystkie wartości inicjałów z bootstrap: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss

Chears

a:focus {
  outline: none;
}

to działa dla mnie na BS3

Czasami {outline: 0}nie rozwiązaliśmy problemu i możemy spróbować{box-shadow: none;}

Ten działał dla mnie w Bootstrap 4:

.btn {border-color: transparent;}

Próbować

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

Pamiętaj, jeśli przycisk znajduje się wewnątrz kotwicy, na przykład:

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

Dodanie stylu do samego przycisku może nie wystarczyć, może być konieczne dodanie a:focus, a:active { outline: none }reguł CSS tam, gdzie jest to konieczne (to zadziałało).

Wypróbuj poniższe

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

Używam bootstrap 4, możesz użyć konturu i cienia pola.

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

Lub jeśli przycisk jest wewnątrz elementu takiego jak div bez tła, wystarczy box-shadow.

#buttonId {
     box-shadow: none;
}

Przykład: https://codepen.io/techednelson/pen/XRwgRB

Jeśli używasz wersji 4.3 lub nowszej, kod nie będzie działał poprawnie. To jest to, czego użyłem. U mnie to zadziałało.

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

Zamiast kierować na klasę przycisku ( .btn ), tutaj kieruję się na sam element przycisku i to działa dla mnie.

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

I może użyć shadow-noneklasy jako pola wejściowego

Sposób SCSS dla wszystkich elementów (nie tylko przycisków):

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

Oto metoda inna niż CSS. Korzystając z JQuery, po prostu usuń klasę „focus” po każdym kliknięciu elementu.

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

Ta metoda może spowodować, że obramowanie pojawi się, a następnie na krótko wycofa, co moim zdaniem nie wygląda źle (wygląda jak część odpowiedzi po kliknięciu przycisku).

Powodem, dla którego użyłem .mousemove () jest to, że .click () i .mouseup () okazały się nieskuteczne.

Zmiana tych wartości działała na mnie. Znalazłem to, patrząc na narzędzia programistyczne 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*/;
}

To również zachowuje cień przycisku, zmienia kolor przycisku tylko po kliknięciu.

Zastąp dokładne instrukcje bootstrap:

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

Zmień kolor obramowania z powrotem na szary

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