Entfernen Sie das Glühen von Safari / Chrome textinput / textarea

Ich frage mich, ob es möglich ist, das standardmäßige blaue und gelbe Leuchten zu entfernen, wenn ich mit CSS auf eine Texteingabe / einen Textbereich klicke.

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

Es wurde jedoch argumentiert, dass das Beibehalten des Glühens / der Gliederung tatsächlich für die Barrierefreiheit von Vorteil ist, da es Benutzern helfen kann, zu erkennen, welches Element derzeit fokussiert ist.

Sie können das Pseudoelement ': focus' auch verwenden, um die Eingaben nur dann anzuvisieren, wenn der Benutzer sie ausgewählt hat.

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

Dieser Effekt kann auch bei nicht eingegebenen Elementen auftreten. Ich habe die folgenden Arbeiten als allgemeinere Lösung gefunden

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

Update: Möglicherweise müssen Sie den :focusSelektor nicht verwenden. Wenn Sie beispielsweise ein Element haben <div id="mydiv">stuff</div>und das äußere Leuchten dieses div-Elements erhalten haben, wenden Sie es einfach wie gewohnt an:

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

Informationen zur Größenänderung von Textbereichen in Webkit-basierten Browsern:

Durch Einstellen der maximalen Höhe und der maximalen Breite im Textbereich wird der visuelle Größenänderungsgriff nicht entfernt. Versuchen:

resize: none;

(und ja, ich stimme zu "versuche, alles zu vermeiden, was die Erwartungen des Benutzers verletzt", aber manchmal macht es Sinn, dh im Kontext einer Webanwendung)

So passen Sie das Erscheinungsbild von Webkit-Formularelementen von Grund auf an:

-webkit-appearance: none;

Carl W :

Dieser Effekt kann auch bei nicht eingegebenen Elementen auftreten. Ich habe die folgenden Arbeiten als allgemeinere Lösung gefunden

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

Ich werde das erklären:

• :focusbedeutet, dass die fokussierten Elemente formatiert werden. Also stylen wir die Elemente im Fokus.
• outline-color: transparent; bedeutet, dass das blaue Leuchten transparent ist.
• outline-style: none; macht das gleiche.

Ich habe dies bei einem divKlickereignis erlebt und nach 20 Suchanfragen habe ich dieses Snippet gefunden, das meinen Tag gerettet hat.

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

Dadurch wird die Hervorhebung der Standardschaltfläche in mobilen Webkit-Browsern deaktiviert

Dies ist die Lösung für Personen, die Wert auf Barrierefreiheit legen .

Bitte nicht outline:none;zum Deaktivieren der Fokuskontur verwenden. Sie beenden die Zugänglichkeit des Webs, wenn Sie dies tun. Es gibt einen zugänglichen Weg, dies zu tun.

In diesem Artikel , den ich geschrieben habe, erfahren Sie, wie Sie den Rand auf zugängliche Weise entfernen.

Kurz gesagt, die Idee ist, den Umrissrand nur dann anzuzeigen, wenn wir einen Tastaturbenutzer erkennen. Sobald ein Benutzer seine Maus benutzt, deaktivieren wir die Gliederung. Als Ergebnis erhalten Sie das Beste von beiden.

Wenn Sie das Leuchten von Schaltflächen in Bootstrap entfernen möchten (was meiner Meinung nach nicht unbedingt eine schlechte UX ist), benötigen Sie den folgenden Code:

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

Diese Lösung hat bei mir funktioniert.

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

Manchmal passiert es, dass die Schaltflächen auch unten verwendet werden, um die äußere Linie zu entfernen

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>

Ich fand es hilfreich, den Umriss auf einer Eingabetaste vom Typ "Schiebetür" zu entfernen, da der Umriss nicht die rechte "Kappe" des Schiebetürbilds abdeckt, wodurch der Fokuszustand ein wenig wackelig aussieht.

input.slidingdoorbutton:focus { outline: none;}

Ich musste diesen Effekt nur aus meinen Texteingabefeldern entfernen, und ich konnte die anderen Techniken nicht richtig einsetzen, aber das funktioniert bei mir.

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

    }

Getestet in Firefox und in Chrome.

Sicher! Sie können den blauen Rand auch mit * aus allen HTML-Elementen entfernen

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

Und

 *{
     outline: none;   
   }