Chcesz coś takiego:

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

The .metoda blur () poprawnie usuwa podświetlenie ostrości i nie psuje stylów Bootstraps.

Rozumiem, że fokus jest najpierw stosowany po zdarzeniu onMouseDown, więc wywołanie e.preventDefault() w onMouseDown może być czystym rozwiązaniem w zależności od twoich potrzeb. Jest to z pewnością rozwiązanie przyjazne dla dostępności, ale oczywiście dostosowuje zachowanie kliknięć myszką, które mogą nie być kompatybilne z Twoim projektem internetowym.

Obecnie używam tego rozwiązania (w ramach projektu react-bootstrap) i nie otrzymuję migotania ostrości lub zachowanego ostrości przycisków po kliknięciu, ale nadal jestem w stanie zakładka moja ostrość i wizualizuj ostrość tych samych przycisków.

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

Użyj etykiety zamiast przycisku.

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

Fiddle

Chociaż łatwo jest usunąć obrys dla wszystkich przycisków skupionych( jak w odpowiedzi user1933897 ), Ale To rozwiązanie jest złe z punktu widzenia dostępności (na przykład zobacz przestań mieszać z domyślnym obrysem ostrości przeglądarki)

Z drugiej strony prawdopodobnie nie da się przekonać przeglądarki do zaprzestania stylizacji klikniętego przycisku jako skupionego, jeśli myśli, że jest skupiony po kliknięciu na niego (patrzę na Ciebie, Chrome na OS X).

Więc, co możemy zrobić? Przychodzi mi do głowy kilka opcji.

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

Każesz przeglądarce usunąć fokus wokół dowolnego przycisku natychmiast po kliknięciu przycisku . Używając mouseup zamiast click zachowujemy domyślne zachowanie interakcji opartych na klawiaturze (mouseup nie jest wywoływane przez klawiaturę).

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

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

To mi pomogło. Stworzyłem własną klasę, która nadpisuje wymagany 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ć dla przeglądarek Chrome i safari.

Opcja 1: Użyj :focus-visible pseudo-klasy

The :focus-visible pseudo-klasa może być używana do zabijania nieestetycznych konturów i pierścieni ostrości na przyciskach i różnych elementach dla użytkowników, którzy nie poruszają się za pomocą klawiatury (np. za pomocą dotyku lub kliknięcia myszką).

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

[[19]}Uwaga: od 2020 roku :focus-visible pseudo-klasa jest nie jest szeroko obsługiwana w przeglądarkach. Jednak polyfill jest bardzo łatwy w użyciu; patrz instrukcje poniżej.

Wariant 2: Użyj .focus-visible polyfill

To rozwiązanie używa zwykłej klasy CSS zamiast wspomnianej powyżej pseudo-klasy i ma szerokie wsparcie dla przeglądarki, ponieważ jest to oficjalny polyfill oparty na Javascript.

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

Uwaga: focus-visible polyfill wymaga dodatkowego polyfill dla kilku starszych przeglądarek, które nie obsługują 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>

Krok 2: Dodaj następujący CSS do swojego stylesheet

Poniżej znajduje się zmodyfikowana wersja rozwiązania CSS udokumentowana dokładniej 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 "focus-visible"

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

Uwaga o dostępności

Usunięcie wszystkich pierścieni ostrości a la :focus { outline: none; } lub :focus { outline: 0; } jest znanym problemem dostępności i nigdy nie jest zalecane. Ponadto są ludzie w społeczności dostępności, którzy woleliby, abyś nigdy nie usuwał obrysu pierścienia ostrości i zamiast tego sprawiał, aby wszystko miało styl :focus - albo outline lub box-shadow mogą być ważne, jeśli zostaną odpowiednio wystylizowane.

Wreszcie, niektórzy ludzie ze społeczności dostępności uważają, że deweloperzy nie powinni implementować :focus-visible na swoich stronach internetowych, dopóki wszystkie przeglądarki nie wdroży i nie ujawni preferencji użytkownika, które pozwalają ludziom wybrać, czy wszystkie elementy powinny być bądź skupiony, czy nie. Osobiście nie zgadzam się z tym myśleniem, dlatego podałem rozwiązanie, które moim zdaniem jest o wiele lepsze niż szkodliwe :focus { outline:none }. Myślę, że {[4] } jest szczęśliwym medium między problemami projektowymi a problemami z dostępnością.

Źródło:

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

Demo:

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

To działa dla mnie, inne rozwiązanie nie wymienione. Po prostu wrzuć go do zdarzenia kliknięcia...

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

Lub wywołanie go z innego zdarzenia/metody...

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

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

Dodaję

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

Jeśli używasz reguły :focus { outline: none; } do usuwania konturów, łącze lub kontrolka będą ustawiane ostrości, ale bez wskazywania ostrości dla użytkowników klawiatury. Metody, aby go usunąć, takie jak JS onfocus="blur()" są jeszcze gorsze i spowoduje, że użytkownicy klawiatury nie będą mogli wchodzić w interakcję z kontrolką.

Hacki, których możesz użyć, to rodzaj OK , obejmuje dodawanie :focus { outline: none; } reguł, gdy użytkownicy wchodzą w interakcję z myszą i usuwają je ponownie, jeśli zostanie wykryta interakcja z klawiaturą. Lindsay Evans mA zrobiłem lib dla tego: https://github.com/lindsayevans/outline.js

Ale wolałbym ustawić klasę na znaczniku html lub body. I mieć kontrolę w pliku CSS, kiedy tego użyć.

Na przykład (wbudowane procedury obsługi zdarzeń służą tylko 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>

Włożyłem do niej Długopis: http://codepen.io/snobojohan/pen/RWXXmp

Ale uważaj, są problemy z wydajnością. Wymusza to ponowne malowanie za każdym razem, gdy użytkownik przełącza się między myszą i klawiatura. Więcej o unikaniu niepotrzebnych Farb http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/

Zauważyłem to samo i chociaż naprawdę mnie to denerwuje, wierzę, że nie ma właściwego sposobu na poradzenie sobie z tym.

Polecam przeciwko wszystkim innym rozwiązaniom, ponieważ całkowicie zabijają dostępność przycisku, więc teraz, gdy zakładasz do przycisku, nie dostaniesz oczekiwanej ostrości.

Tego należy unikać!

.btn:focus {
  outline: none;
}

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

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

Jak zauważył user1933897, może to być specyficzne dla MacOS z Chrome.

Późno, ale kto 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 warto wymienić jako osobną odpowiedź dla jasności. Tak długo, jak nie musisz mieć focus na przycisku, możesz użyć zdarzenia focus, aby usunąć go, zanim będzie można zastosować jakiekolwiek efekty CSS:

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

Pozwala to uniknąć migotania, które można zobaczyć podczas korzystania z zdarzenia click. To ogranicza interfejs i nie będzie można Zakładki do przycisku, ale to nie jest problem we wszystkich aplikacjach.

Style

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

Użycie

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

Spróbuj tego rozwiązania, aby usunąć obramowanie wokół przycisku. Dodaj ten kod w css.

Try

button:focus{
outline:0px;
}

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

button:focus{
 outline:none !important;
 }

Dla osób chcących zrobić to w czysty css:

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

To może również działać dla link i tak dalej, a bonus, utrzymuje dostęp do klawiatury. Na koniec jest ignorowany przez przeglądarki, które nie obsługują :focus-visible

Mieliśmy podobny problem i zauważyliśmy, że Bootstrap 3 nie ma problemu na kartach (w Chrome). Wygląda na to, że używają outline-style, który pozwala przeglądarce zdecydować, co najlepiej zrobić, a Chrome wydaje się robić to, co chcesz: pokazywać kontur po skupieniu, chyba że po prostu kliknąłeś element.

Wsparcie dla outline-style jest trudne do określenia, ponieważ przeglądarka decyduje, co to oznacza. Najlepiej sprawdzić w kilku przeglądarkach i mieć odwrót zasada.

Innym możliwym rozwiązaniem jest dodanie klasy za pomocą słuchacza Javascript, gdy użytkownik kliknie przycisk, a następnie usunie tę klasę z innym słuchaczem. Pozwala to zachować dostępność (widoczne zakładki), jednocześnie zapobiegając dziwacznemu zachowaniu Chrome polegającemu na rozważaniu przycisku skupionego 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 jest praca, mam nadzieję, że ci pomogę

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

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

Usuwa kontur po kliknięciu, ale zachowuje ostrość podczas zakładki (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;
     }

This outline: none będzie działać zarówno dla przycisku, jak i znacznika

Możesz ustawić tabIndex="-1". Spowoduje to, że przeglądarka pominie ten przycisk podczas zakładki za pomocą kontrolek z możliwością ustawienia ostrości.

Inne" poprawki " sugerowane tutaj, tylko usunąć kontur ostrości, ale nadal pozostawia przyciski tababable. Jednak z punktu widzenia użyteczności, już usunięte blask, więc użytkownik nie będzie wiedział, co jest obecnie koncentruje przycisk, w jakikolwiek sposób.

Z drugiej strony, uczynienie przycisku nie-tabulatorem ma wpływ na dostępność.

Używam go do usuwania konturu ostrości z przycisku X w bootstrap modal, które mają zduplikowany przycisk "Zamknij" na dole w dowolny sposób, więc moje rozwiązanie nie ma wpływu na dostępność.

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 dodać poniżej linii w kodzie css.

button:focus { outline: none }

Nie znalazłem solidnych odpowiedzi, które ani nie złamały dostępności, ani nie podważyły funkcjonalności.

Być może połączenie kilku będzie działać lepiej ogólnie.

<h1
  onmousedown="this.style.outline='none';"
  onclick="this.blur(); runFn(this);"
  onmouseup="this.style.outline=null;"
>Hello</h1>

function runFn(thisElem) { console.log('Hello: ', thisElem); }

Właśnie miałem ten sam problem na MacOS i Chrome podczas korzystania z przycisku, aby uruchomić Zdarzenie "Przejście". Jeśli ktoś czytający to już używa detektora zdarzeń, możesz go rozwiązać, wywołując .blur() po wykonaniu czynności.

Przykład:

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

Jeśli jednak nie używasz już słuchacza zdarzeń, dodanie go tylko w celu rozwiązania tego problemu może dodać niepotrzebnych kosztów, a rozwiązanie stylizacji, takie jak poprzednie odpowiedzi, jest lepsze.

Jeśli używasz przeglądarki webkit (i potencjalnie przeglądarki zgodnej z prefiksem dostawcy webkit), kontur ten należy do pseudoklasy -webkit-focus-ring przycisku. Po prostu ustaw outline na none:

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

Miałem ten sam problem używając <a> działając jako przycisk i odkryłem brakowało mi obejście przez dodanie attr type="button" sprawia, że zachowuje się normalnie dla mnie przynajmniej.

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