Wszystkie moje przyciski są wyróżnione wokół nich po ich kliknięciu. To jest w Chrome.

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

Używam Bootstrap z motywem, ale jestem pewien, że to nie to: zauważyłem to wcześniej w innym projekcie.

Znika, jeśli użyję <a>tagu zamiast <button>. Czemu? Gdybym chciał użyć, <button>jak miałbym to zrobić?

Znalazłem te pytania i odpowiedzi na innej stronie i nadpisanie stylu fokusa przycisku zadziałało. Ten problem może dotyczyć MacOS z Chrome.

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

Pamiętaj jednak, że ma to wpływ na dostępność i nie jest zalecane, dopóki nie uzyskasz dobrego, spójnego stanu skupienia dla przycisków i danych wejściowych. Zgodnie z poniższymi komentarzami są użytkownicy, którzy nie mogą używać myszy.

Chcesz coś takiego:

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

Metoda .blur () poprawnie usuwa podświetlanie fokusu i nie psuje stylów Bootstraps.

mój zrozumienia jest to, że ostrość jest stosowany po raz pierwszy po onMouseDownwypadku, więc dzwoni e.preventDefault()wonMouseDown może być czyste rozwiązanie w zależności od potrzeb. Jest to z pewnością rozwiązanie przyjazne dostępności, ale oczywiście dostosowuje zachowanie kliknięć myszą, które mogą nie być zgodne z twoim projektem internetowym.

Obecnie używam tego rozwiązania (w ramach react-bootstrapprojektu) i po kliknięciu nie otrzymuję migotania fokusu ani zatrzymania fokusu przycisków, ale nadal jestem w stanie tabulować fokus i wizualizować fokus tych samych przycisków.

Nie mogę uwierzyć, że nikt tego jeszcze nie opublikował.

Użyj etykiety zamiast przycisku.

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

Skrzypce

Chociaż łatwo jest po prostu usunąć kontur dla wszystkich skoncentrowanych przycisków (jak w odpowiedzi user1933897 ), ale to rozwiązanie jest złe z punktu widzenia dostępności (na przykład zobacz Zatrzymywanie bałaganu za pomocą domyślnego konturu Focus przeglądarki )

Z drugiej strony prawdopodobnie nie można przekonać przeglądarki, aby przestała stylizować kliknięty przycisk jako skoncentrowany, jeśli wydaje się, że jest on skoncentrowany po kliknięciu (patrzę na Ciebie, Chrome na OS X).

Więc co możemy zrobić? Przychodzi mi na myśl kilka opcji.

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

Poinstruujesz swoją przeglądarkę, aby usunęła fokus wokół dowolnego przycisku natychmiast po jego kliknięciu. Używając mouseupzamiast clickzachowujemy domyślne zachowanie dla interakcji z klawiaturą ( mouseupnie jest wywoływane przez klawiaturę).

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

Tutaj wyłączasz kontur tylko dla przycisków uniesionych . Oczywiście nie jest to idealne, ale w niektórych sytuacjach może wystarczyć.

To zadziałało dla mnie. Stworzyłem niestandardową klasę, która zastępuje niezbędny CSS.

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

-Webkit-box-shadow będzie działał w przeglądarkach Chrome i Safari.

To działa dla mnie, inne rozwiązanie nie wspomniane. Wystarczy rzucić go w zdarzenie kliknięcia ...

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

Lub nazwij to z innego zdarzenia / metody ...

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

Jeśli użyjesz reguły :focus { outline: none; }do usunięcia konturów, łącze lub element sterujący będzie można ustawić, ale dla użytkowników klawiatury nie będzie on wskazywał ostrości. Metody usuwania go, takie jak JS, onfocus="blur()"są jeszcze gorsze i spowodują, że użytkownicy klawiatury nie będą mogli wchodzić w interakcje z kontrolką.

Hacki, których możesz użyć, które są w porządku , obejmują dodawanie :focus { outline: none; }reguł, gdy użytkownicy wchodzą w interakcję z myszą, i usuwanie ich ponownie, jeśli zostanie wykryta interakcja klawiatury. Lindsay Evans stworzyła lib do tego: https://github.com/lindsayevans/outline.js

Ale wolałbym ustawić klasę w tagu HTML lub Body. I kontroluj w pliku CSS, kiedy tego użyć.

Na przykład (wbudowane moduły obsługi zdarzeń służą wyłącznie do celów demonstracyjnych):

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

Położyłem togheter a Pen: http://codepen.io/snobojohan/pen/RWXXmp

Ale uwaga: występują problemy z wydajnością. Wymusza to odmalowanie za każdym razem, gdy użytkownik przełącza się między myszą a klawiaturą. Więcej informacji na temat unikania niepotrzebnych farb http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/

Zauważyłem to samo i chociaż naprawdę mnie to denerwuje, uważam, że nie ma odpowiedniego sposobu, aby sobie z tym poradzić.

Odradzałbym wszystkie inne podane rozwiązania, ponieważ całkowicie zabijają one dostęp do przycisku, więc teraz, kiedy przechodzisz do przycisku, nie uzyskasz oczekiwanego skupienia.

Tego należy unikać!

.btn:focus {
  outline: none;
}

Znajduję rozwiązanie. kiedy się skupiamy, bootstrap używa box-shadow, więc po prostu go wyłączamy (za mało reputacji, nie można przesłać obrazu :().

Dodaję

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

to działa.

OPCJA 1: Użyj :focus-visiblepseudoklasy

:focus-visiblePseudo-klasa może być stosowany do zabijania nieestetyczne kontury i skupić pierścienie na guziki i różnych elementów dla użytkowników, którzy nie są za pomocą klawiatury nawigacyjnej (tj poprzez dotyk lub kliknięcie myszą).

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

Ostrzeżenie: od 2020 r. :focus-visiblePseudoklasa nie jest szeroko obsługiwana przez przeglądarki . Jednak wypełniacz jest bardzo łatwy w użyciu; patrz instrukcje poniżej.

OPCJA 2: Użyj .focus-visible wypełnienia

To rozwiązanie wykorzystuje normalną klasę CSS zamiast wspomnianej wyżej pseudoklasy i ma szeroką obsługę przeglądarki, ponieważ jest to oficjalna polifill oparta na Javascript .

Krok 1: Dodaj zależności JavaScript do swojej strony HTML

Uwaga: widoczna dla ostrości wielokrotna wypełnienie wymaga dodatkowej wielokrotnej wypełnienia dla kilku starszych przeglądarek, które nie obsługują listy klas :

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

Krok 2: Dodaj następujący CSS do swojego arkusza stylów

Poniżej znajduje się zmodyfikowana wersja rozwiązania CSS udokumentowana bardziej szczegółowo powyżej.

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

Krok 3 (opcjonalnie): w razie potrzeby użyj klasy „widoczna fokus”

Jeśli masz jakieś elementy, w których rzeczywiście chcesz pokazać pierścień ostrości, gdy ktoś kliknie lub użyje dotyku, po prostu dodaj focus-visibleklasę do elementu 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>

Ratunek:

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

Próbny:

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

Jeśli powyższe nie działa, spróbuj tego:

.btn: focus {konspektu: brak; box-shadow: none; border: 2px solid transparent;}

Jak wskazał użytkownik 1933897, może to być specyficzne dla MacOS z Chrome.

Późno, ale kto to wie, może komuś pomóc. CSS wyglądałby następująco:

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

HTML wyglądałby następująco:

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

W ten sposób możesz zachować btn i powiązane z nim zachowania.

Wspomniałem o tym w komentarzu powyżej, ale dla jasności warto ją wymienić jako osobną odpowiedź. Tak długo, jak nie musisz nigdy skupiać się na przycisku, możesz użyć zdarzenia skupienia, aby je usunąć, zanim zastosuje jakiekolwiek efekty CSS:

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

Pozwala to uniknąć migotania, które można zobaczyć podczas korzystania ze zdarzenia kliknięcia. To ogranicza interfejs i nie będziesz mógł przejść do przycisku, ale to nie jest problem we wszystkich aplikacjach.

Styl

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

Za pomocą

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

Wypróbuj to rozwiązanie, aby usunąć obramowanie wokół przycisku. Dodaj ten kod w css.

Próbować

button:focus{
outline:0px;
}

Jeśli nie działa, użyj poniżej.

button:focus{
 outline:none !important;
 }

Dla osób, które chcą to zrobić tylko za pomocą css:

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

Może to również działać w przypadku linków i tak dalej, a dodatkowo utrzymuje dostęp do klawiatury. Na koniec jest ignorowany przez przeglądarki, które nie obsługują: widoczny fokus

Wystąpił podobny problem i zauważyliśmy, że Bootstrap 3 nie ma problemu na swoich kartach (w Chrome). Wygląda na to, że używają stylu konspektu który pozwala przeglądarce decydować, co najlepiej zrobić, a Chrome wydaje się robić to, co chcesz: pokaż kontur po skupieniu, chyba że klikniesz element.

Wsparcie outline-stylejest trudne do ustalenia, ponieważ przeglądarka decyduje, co to oznacza. Najlepiej sprawdzić w kilku przeglądarkach i zastosować regułę rezerwową.

Innym możliwym rozwiązaniem jest dodanie klasy za pomocą programu nasłuchującego Javascript, gdy użytkownik kliknie przycisk, a następnie usunięcie tej klasy, na której skupia się inny słuchacz. Utrzymuje to dostępność (widoczne tabulacje), a jednocześnie zapobiega dziwacznemu zachowaniu Chrome w przypadku rozważania skupienia się na przycisku po kliknięciu.

JS:

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

CSS:

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

Pełny przykład tutaj: https://jsfiddle.net/4bbb37fh/

To praca, mam nadzieję, że ci pomogę

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

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

to usuwa kontur po kliknięciu, ale utrzymuje fokus podczas tabulacji (dla a11y)

To działa najlepiej

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

ten zarys: żaden nie będzie działał zarówno dla przycisku, jak i tagu

Dodaj to w CSS:

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

Znalazłem rozwiązanie, po prostu dodaj poniżej wiersza w kodzie css.

button:focus { outline: none }

Właśnie miałem ten sam problem na MacOS i Chrome, gdy użyłem przycisku do wywołania zdarzenia „przejścia”. Jeśli ktoś, kto to czyta, już korzysta z detektora zdarzeń, możesz go rozwiązać, dzwoniąc .blur()po swoich działaniach.

Przykład:

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

Chociaż jeśli nie używasz już detektora zdarzeń, dodanie jednego tylko w celu rozwiązania tego problemu może dodać niepotrzebny narzut i lepsze jest rozwiązanie do stylizacji takie jak w poprzednich odpowiedziach.

Możesz ustawić tabIndex="-1". Spowoduje to, że przeglądarka pominie ten przycisk, gdy TAB przechodzisz przez ruchome elementy sterujące.

Inne sugerowane tutaj „poprawki”, usuwają tylko zarys fokusa, ale nadal pozostawiają przyciski tabulowane. Jednak z punktu widzenia użyteczności usunąłeś już blask, więc użytkownik nie będzie wiedział, który przycisk jest aktualnie ustawiony.

Z drugiej strony, uniemożliwianie zakładki przycisku ma wpływ na dostępność.

Używam go do usuwania konturu fokusu z przycisku X bootstrap modal, który ma na dole zduplikowany przycisk „Zamknij”, więc moje rozwiązanie nie ma wpływu na dostępność.

Jeśli używasz przeglądarki internetowej (i potencjalnie przeglądarki kompatybilnej z prefiksem dostawcy Webkita), ten kontur należy do -webkit-focus-ringpseudoklasy przycisku . Po prostu ustaw outlinena none:

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

Chrome jest taką przeglądarką webkitów, a ten efekt występuje również w systemie Linux (nie tylko MacOS, chociaż niektóre style Chrome to tylko MacOS)

Miałem ten sam problem z <a>działaniem jak przycisk i odkryłem, że nie udało mi się obejść tego problemu, dodając attr, type="button"co najmniej dla mnie działa normalnie.

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

bezpośrednio w tagu HTML (w scenariuszu, w którym możesz chcieć pozostawić motyw bootstrap w innym miejscu w swoim projekcie) ..

przykłady do wypróbowania ..

<button style="border: transparent;">

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

..ect ,. w zależności od pożądanego efektu.