Usuń niebieską ramkę z przycisku niestandardowego stylu css w Chrome

Pracuję na stronie internetowej i chcę niestandardowe <button>tagi. Więc z CSS, powiedziałem: border: none. Teraz działa idealnie w safari, ale w chromie, kiedy klikam jeden z przycisków, otacza go irytująca niebieska ramka. Myślałem button:active { outline: none }lub button:focus { outline:none }zadziała, ale nie działa. Jakieś pomysły?

Tak to wygląda przed kliknięciem (i jak chcę, aby nadal wyglądało po kliknięciu):

A oto granica, o której mówię:

Oto mój CSS:

button.launch {
    background-color: #F9A300;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.launch:hover {
    cursor: pointer;
    background-color: #FABD44;
}

button.change {
    background-color: #F88F00;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.change:hover {
    cursor: pointer;
    background-color: #F89900;
}

button:active {
    outline: none;
    border: none;
}

Nie jest to zalecane, ponieważ powoduje to cofnięcie dostępności witryny; Aby uzyskać więcej informacji, zobacz ten post .

To powiedziawszy, jeśli nalegasz, ten CSS powinien działać:

button:focus {outline:0;}

Sprawdź to lub JSFiddle: http://jsfiddle.net/u4pXu/

Lub w tym fragmencie:

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.change {
background-color: #F88F00;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.change:hover {
cursor: pointer;
background-color: #F89900;
}

button:active {
outline: none;
border: none;
}

button:focus {outline:0;}

<button class="launch">Launch with these ads</button> 
<button class="change">Change</button>

Czekać! Jest powód tego brzydkiego zarysu!

Przed usunięciem tego brzydkiego niebieskiego obrysu możesz wziąć pod uwagę dostępność . Domyślnie ten niebieski kontur jest umieszczony na elementach, na których można ustawić ostrość. Dzieje się tak, aby użytkownicy mający problemy z dostępnością mogli skupić się na tym przycisku, przechodząc do niego klawiszem Tab. Niektórzy użytkownicy nie mają umiejętności motorycznych do korzystania z myszy i muszą używać tylko klawiatury (lub innego urządzenia wejściowego) do interakcji z komputerem. Po usunięciu niebieskiego obrysu nie będzie już wizualnego wskaźnika tego, na który element jest skupiony. Jeśli zamierzasz usunąć niebieski kontur, należy go zastąpić innym rodzajem wizualnego wskazania, że ​​przycisk jest aktywny.

Możliwe rozwiązanie: przyciemnij przyciski po skupieniu

W poniższych przykładach niebieski kontur Chrome został najpierw usunięty przy użyciu button:focus { outline:0 !important; }

Oto podstawowe przyciski Bootstrap, które wyglądają normalnie:

Oto przyciski, gdy zostaną uaktywnione:

Tutaj przyciski po ich naciśnięciu:

Jak widać, przyciski są nieco ciemniejsze, gdy zostaną zogniskowane. Osobiście poleciłbym przyciemnić skupione przyciski jeszcze ciemniej, aby istniała bardzo zauważalna różnica między stanem skupienia a normalnym stanem przycisku.

To nie tylko dla niepełnosprawnych użytkowników

Ułatwienie dostępu do witryny jest często pomijane, ale może pomóc zwiększyć produktywność witryny. Jest wielu zwykłych użytkowników, którzy używają poleceń klawiatury do poruszania się po stronach internetowych, aby trzymać się klawiatury.

Po prostu usuwam kontur ze wszystkich tagów na stronie, zaznaczając wszystko i stosując kontur: brak do wszystkiego :)

*:focus {outline:none}

Jak wspomniano bagofcole, być może trzeba dodać! Ważne, aby styl wyglądał następująco:

*:focus {outline:none !important}

W moim przypadku tego problemu musiałem określić box-shadow: none

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

Nie zapomnij !importantdeklaracji, aby uzyskać lepszy wynik

button:focus {outline:0 !important;}

Reguła, która ma właściwość! Ważne, będzie zawsze stosowana bez względu na to, gdzie reguła pojawia się w dokumencie CSS.

Usuwanie outlinejest straszne dla dostępności! Idealnie, pierścień ostrości pojawia się tylko wtedy, gdy użytkownik zamierza korzystać z klawiatury .

Użyj : widoczne zogniskowanie . Obecnie jest to propozycja W3C dotycząca stylizacji fokusu tylko za pomocą klawiatury za pomocą CSS i jest obsługiwana w Firefox ( caniuse ). Dopóki inne główne przeglądarki go nie obsługują, możesz używać tego solidnego wypełniacza .

/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
  outline: none;
}

/* Optional: Customize .focus-visible */
.focus-visible {
  outline-color: lightgreen;
}

Napisałem też bardziej szczegółowy post na wypadek, gdybyś potrzebował więcej informacji.

Dodaj to do swojego pliku CSS.

*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

Użyj tego:

:active {
    outline:none;
}

lub to, jeśli to nie działa:

:active {
   outline:none !important;
}

To działa dla mnie (przynajmniej FF i Chrome). Zamiast celować w :focusstan, po prostu celuj w :activestan, który usunie natrętne pod względem estetycznym podświetlanie w przeglądarce, gdy użytkownik kliknie link. Ale nadal zachowuje stany skupienia, gdy użytkownik niepełnosprawny przechodzi na zakładkę lub przesuwa ją na stronie. Obie strony są zadowolone. :)

dla tego problemu:

Użyj tego:

   *{
         -webkit-tap-highlight-color: rgba(0,0,0,0);
         -webkit-tap-highlight-color: transparent; /* For some Androids */
    }

wynik:

Każdy, kto używa Bootstrap i ma ten problem, korzysta z: active: focus oraz tylko: active i: focus, więc będziesz potrzebować:

element:active:focus {
    outline: 0;
}

Mam nadzieję, że udało mi się zaoszczędzić komuś czasu na rozgryzienie tego, uderzyłem się w głowę, zastanawiając się, dlaczego tak prosta rzecz nie działa.

Większość rozwiązań nie będzie działać, jeśli używasz Bootstrap 4.1 i ewentualnie innych wersji. Po wielu uderzeniach głową odkryłem, że musisz zastosować klasę shadow-none :

<button class="btn shadow-none">Bootstrap (4.1) button without shadow</button>

Oto, co zadziałało dla mnie:

button:focus {
    box-shadow:none;
}

Poprawka dla Chrome i innych przeglądarek

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

wypróbuj ten kod dla wszystkich elementów, które mają problem z niebieskim obramowaniem

*{
outline: none;
}

lub

*{
outline-style: none;
}

Innym sposobem rozwiązania problemu dostępności , o którym jeszcze tu nie wspomniano, jest odrobina Javascript . Kredyty trafiają do tego wnikliwego posta na blogu z hackernoon: https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2

Podejście tutaj jest naprawdę proste, ale skuteczne: dodawanie klasy, gdy ludzie zaczynają używać klawisza Tab do poruszania się po stronie (i opcjonalnie usuwaj ją po ponownym przełączeniu na mysz. Następnie możesz użyć tej klasy, aby wyświetlić kontur fokusa lub nie .

function handleFirstTab(e) {
    if (e.keyCode === 9) { // the "I am a keyboard user" key
        document.body.classList.add('user-is-tabbing');
        window.removeEventListener('keydown', handleFirstTab);
    }
}

window.addEventListener('keydown', handleFirstTab);

Napotkałem ten sam problem, więc użyłem prostego CSS-

.custom-button {
    outline: none
}

Jeśli chcesz usunąć ten sam efekt na wejściu, możesz dodać następujący kod oraz przycisk.

input:focus {outline:0;}

Dopóki wszystkie nowoczesne przeglądarki nie zaczną obsługiwać selektora css : focus-visible ,
najprostszym i prawdopodobnie najlepszym sposobem na zapisanie dostępności jest usunięcie tego trudnego fokusa tylko dla użytkowników myszy i zapisanie go dla użytkowników klawiatury :

1. Użyj tego małego polifillu (około 10 KB): https://github.com/WICG/focus-visible
2. Dodaj następny kod gdzieś w twoim css:

.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

Obsługa przeglądarki css4-selektora: fokus widoczny teraz bardzo słaby:
https://caniuse.com/#search=focus-visible

Po prostu napisz outline:none;. Nie ma potrzeby używania pseudoelementufocus

Jest to problem występujący w rodzinie Chrome i istnieje od zawsze.

Zgłoszono błąd https://bugs.chromium.org/p/chromium/issues/detail?id=904208

Można to pokazać tutaj: https://codepen.io/anon/pen/Jedvwj, gdy tylko dodasz ramkę do dowolnego przycisku podobnego do przycisku (na przykład rola = „przycisk” została dodana do tagu) Chrome się bałagan i ustawia stan skupienia po kliknięciu myszą.

Bardzo polecam użycie tej poprawki: https://github.com/wicg/focus-visible .

Po prostu wykonaj następujące czynności

npm install --save focus-visible

Dodaj skrypt do HTML:

<script src="/node_modules/focus-visible/dist/focus-visible.min.js"></script>

lub zaimportuj do głównego pliku wejściowego, jeśli używasz pakietu internetowego lub czegoś podobnego:

import 'focus-visible/dist/focus-visible.min';

następnie umieść to w swoim pliku css:

// hide the focus indicator if element receives focus via mouse, but show on keyboard focus (on tab).
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

// Define a strong focus indicator for keyboard focus.
// If you skip this then the browser's default focus indicator will display instead
// ideally use outline property for those users using windows high contrast mode
.js-focus-visible .focus-visible {
  outline: magenta auto 5px;
}

Państwo może po prostu ustawić:

button:focus {outline:0;}

ale jeśli masz dużą liczbę użytkowników, jesteś w niekorzystnej sytuacji dla tych, którzy nie mogą korzystać z myszy lub dla tych, którzy po prostu chcą korzystać z klawiatury w celu uzyskania szybkości.

Miałem ten sam problem z bootstrapem. Rozwiązałem zarówno kontur, jak i cień

.btn:focus, .btn.focus {
    outline: none !important;
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0) !important; // or none
}