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

337

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.

Alec Smart
quelle
6
@Steve, ein weiterer Grund für die Deaktivierung ist, wenn der Glow-Effekt in allen Browsern funktionieren soll, indem Folgendes verwendet wird: focus anstelle des schlecht unterstützten Gliederungsstils.
Langdon
90
Es ist wirklich ärgerlich, wenn Leute ein philosophisches Gespräch darüber beginnen, ob etwas das "Richtige" ist, wenn es sich um eine technische Frage handelt.
Tim
2
Ich mache eine Online-Tabelle, Steve, damit sie für meine Verwendung geeignet ist. Es hängt davon ab, aber wenn es nur eine einfache Form ist, sollten Sie den Umriss so lassen, wie er ist.
William44isme
4
Ich denke, es ist vollkommen in Ordnung, es zu deaktivieren und einen benutzerdefinierten Fokus-Effekt mit
CSS zu erstellen
Zu wissen, wie man etwas deaktiviert, bedeutet nicht, dass es irreversibel ist. Jeder, der für einen Kunden arbeitet, weiß, dass er möglicherweise etwas in eine Richtung gerendert sehen und es dann wieder auf die ursprüngliche / Standardmethode umschalten möchte. Wenn Sie sie über Barrierefreiheit belehren, ändert dies nichts an diesem Wunsch und macht niemanden glücklich.
JakeGould

Antworten:

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

ajm
quelle
2
Perfekt, vielen Dank. Ich frage mich auch, ob ich die Option zum Ändern der Textbereichsgröße auch entfernen kann (unten rechts im Textbereich).
Alec Smart
3
+1 für die Vorsicht; Bitte vermeiden Sie alles, was die Erwartungen des Benutzers an die Leistung seiner Plattform verletzt. Möglicherweise beeinträchtigen Sie tatsächlich deren Produktivität und erschweren die Verwendung Ihrer Website.
Rob
6
Entfernen Sie meine Chrom / Safari-Textarea-Größenänderungsoption auf eigene Gefahr! Ich finde es wirklich nützlich, sogar auf einigen Websites unverzichtbar.
JeeBee
5
zum Entfernen des Größenänderungshandles: Größenänderung: keine;
Daniel
22
Kastenschatten: keine;
Styks
92

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;
}
Carl W.
quelle
Dies funktioniert zum Beispiel für <button>Elemente, die nicht besonders vom Glow-on-Focus profitieren, da Sie meistens sowieso darauf klicken.
Kasimir
1
Die akzeptierte Antwort funktionierte bei Chrome unter OSX nicht. Diese Lösung hat den Job gemacht.
Bart
Mit dieser Technik können Sie auch den Fokus beibehalten, den Wert der Kontur jedoch neu definieren, um eine Volltonfarbe Ihrer Wahl usw. zu erhalten, die dem Stil Ihrer Site entspricht, wenn das Entfernen insgesamt nicht vollständig zufriedenstellend ist.
Neil Monroe
1
Hat bei der neuesten Version von Chrome45.0.2454.101 m
J86
Diese Antwort von @ Carl-W sollte nicht übersehen werden! - Dies war nützlich, wenn Sie jQuery verwenden, um eine Verknüpfung zu einem Anker herzustellen, der ein div war. Ich habe einen Iframe im Div neu geladen und bin dann manuell zum Anker gegangen, ohne ihn neu zu laden. Es würde die Seite zum Anker hinunter scrollen, aber das ganze Div hatte ein blaues äußeres Leuchten. Dieses CSS wurde zum div-Element hinzugefügt und es hat funktioniert! - HINWEIS: Ich habe nicht :focusfür den Selektor verwendet, sondern nur das outline-colorund outline-styleauf das CSS meines Divs gesetzt.
Wade
13

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;
Thomas Maas
quelle
3
Es ist auch möglich , in eine Richtung zu erlauben , nur die Größenänderung, die mit einigen Layouts seine Interaktion beheben kann , ohne sie vollständig zu deaktivieren: die möglichen Werte für Resize sind none, both, horizontal, vertical, und inherit.
Boann
Ich mag die hier angebotene Lösung mit '-webkit-Aussehen: keine;' - Entfernt ALLE Stile aus den Eingabeelementen, sodass Sie sie nach Bedarf stylen können. Vielen Dank!
Hanazair
Ich weiß nicht, warum dies so viele positive Stimmen hat, es ist überhaupt keine Antwort auf die Frage.
Paddotk
7

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.
MineCMD
quelle
5

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

Michael
quelle
4

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.

Wim Mostmans
quelle
2

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;
}
Kyle S.
quelle
Vielen Dank. .btn:active:focuswar notwendig, um das Leuchten zu entfernen, während der Knopf tatsächlich gedrückt wurde.
Homerjam
2

Diese Lösung hat bei mir funktioniert.

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

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;
}
vamsikrishnamannem
quelle
0
<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>
criss_ae
quelle
0

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;}
Rich Finelli
quelle
0

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.

Martyn Shutt
quelle
0

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

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

Und

 *{
     outline: none;   
   }
Santosh Khalse
quelle