Usuń świecenie Safari / Chrome textinput / textarea

Zastanawiam się, czy można usunąć domyślną niebieską i żółtą poświatę po kliknięciu pola wprowadzania / obszaru tekstowego za pomocą CSS?

textarea, select, input, button { outline: none; }

Chociaż argumentowano, że zachowanie blasku / konturu jest w rzeczywistości korzystne dla dostępności, ponieważ może pomóc użytkownikom zobaczyć, który element jest aktualnie skupiony.

Możesz także użyć pseudoelementu „: focus”, aby kierować dane wejściowe tylko wtedy, gdy użytkownik je zaznaczy.

Demo: https://jsfiddle.net/JohnnyWalkerDesign/xm3zu0cf/

Ten efekt może wystąpić także na elementach niepochodzących z wejścia. Znalazłem następujące prace jako bardziej ogólne rozwiązanie

:focus {
  outline-color: transparent;
  outline-style: none;
}

Aktualizacja: może nie być konieczne użycie :focusselektora. Jeśli masz element, powiedzmy <div id="mydiv">stuff</div>, i otrzymujesz zewnętrzny blask na tym elemencie div, po prostu zastosuj jak normalnie:

#mydiv {
  outline-color: transparent;
  outline-style: none;
}

W przypadku zmiany rozmiaru obszaru tekstowego w przeglądarkach internetowych:

Ustawienie maksymalnej wysokości i maksymalnej szerokości w obszarze tekstowym nie usunie wizualnego uchwytu zmiany rozmiaru. Próbować:

resize: none;

(i tak zgadzam się z „staraj się unikać robienia czegokolwiek, co łamie oczekiwania użytkownika”, ale czasem ma to sens, np. w kontekście aplikacji internetowej)

Aby dostosować wygląd elementów formularza od zera:

-webkit-appearance: none;

Carl W :

Ten efekt może wystąpić także na elementach niepochodzących z wejścia. Znalazłem następujące prace jako bardziej ogólne rozwiązanie

:focus {
  outline-color: transparent;
  outline-style: none;
}

Wytłumaczę to:

• :focusoznacza, że ​​stylizuje elementy, które są w centrum uwagi. Więc projektujemy elementy w centrum uwagi.
• outline-color: transparent; oznacza, że ​​niebieski blask jest przezroczysty.
• outline-style: none; robi to samo.

Doświadczyłem tego podczas divzdarzenia kliknięcia i po 20 wyszukiwaniach znalazłem ten fragment, który uratował mi dzień.

-webkit-tap-highlight-color: rgba(0,0,0,0);

Wyłącza to domyślne podświetlanie przycisków w przeglądarkach mobilnych webkit

Jest to rozwiązanie dla osób dbających o dostępność .

Proszę nie używać outline:none;do wyłączania konturu fokusa. Jeśli to zrobisz, zabijasz dostęp do sieci. Jest dostępny sposób na to.

Sprawdź ten artykuł , który napisałem, aby wyjaśnić, jak usunąć granicę w przystępny sposób.

W skrócie chodzi o to, aby pokazać obramowanie konturu tylko wtedy, gdy wykryjemy użytkownika klawiatury. Gdy użytkownik zacznie używać myszy, wyłączamy kontur. W rezultacie otrzymujesz to, co najlepsze.

Jeśli chcesz usunąć blask z przycisków w Bootstrap (co niekoniecznie jest moim zdaniem złe UX), potrzebujesz następującego kodu:

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

To rozwiązanie działało dla mnie.

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

czasami zdarza się, że przyciski również następnie użyj poniżej, aby usunąć linię zewnętrzną

input:hover
input:active, 
input:focus, 
textarea:active,
textarea:hover,
textarea:focus, 
button:focus,
button:active,
button:hover
{
    outline:0px !important;
}

<select class="custom-select">
        <option>option1</option>
        <option>option2</option>
        <option>option3</option>
        <option>option4</option>
</select>

<style>
.custom-select {
        display: inline-block;
        border: 2px solid #bbb;
        padding: 4px 3px 3px 5px;
        margin: 0;
        font: inherit;
        outline:none; /* remove focus ring from Webkit */
        line-height: 1.2;
        background: #f8f8f8;

        -webkit-appearance:none; /* remove the strong OSX influence from Webkit */

        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
    }
    /* for Webkit's CSS-only solution */
    @media screen and (-webkit-min-device-pixel-ratio:0) { 
        .custom-select {
            padding-right:30px;    
        }
    }

    /* Since we removed the default focus styles, we have to add our own */
    .custom-select:focus {
        -webkit-box-shadow: 0 0 3px 1px #c00;
        -moz-box-shadow: 0 0 3px 1px #c00;
        box-shadow: 0 0 3px 1px #c00;
    }

    /* Select arrow styling */
    .custom-select:after {
        content: "▼";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        font-size: 60%;
        line-height: 30px;
        padding: 0 7px;
        background: #bbb;
        color: white;

        pointer-events:none;

        -webkit-border-radius: 0 6px 6px 0;
        -moz-border-radius: 0 6px 6px 0;
        border-radius: 0 6px 6px 0;
    }
</style>

Uznałem, że pomocne jest usunięcie obrysu przycisku wejściowego typu „drzwi przesuwne”, ponieważ kontur nie obejmuje prawej „pokrywy” obrazu drzwi przesuwnych, przez co stan skupienia wygląda trochę niepewnie.

input.slidingdoorbutton:focus { outline: none;}

Musiałem tylko usunąć ten efekt z moich pól wprowadzania tekstu i nie mogłem sprawić, by inne techniki działały całkiem dobrze, ale to właśnie dla mnie działa;

input[type="text"], input[type="text"]:focus{
            outline: 0;
            border:none;
            box-shadow:none;

    }

Testowane w przeglądarce Firefox i Chrome.

Pewnie! Niebieską ramkę można usunąć również ze wszystkich elementów HTML za pomocą *

*{
    outline-color: transparent;
    outline-style: none;
  }

I

 *{
     outline: none;   
   }