webentwicklung-frage-antwort-db.com.de

Safari / Chrome Texteingabe / Textbereich leuchten entfernen

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

320
Alec Smart
textarea, select, input, button { outline: none; }

Es wurde jedoch argumentiert, dass das Beibehalten des Schimmerns/Umrisses für die Barrierefreiheit tatsächlich von Vorteil ist, da es den Benutzern helfen kann, zu erkennen, auf welches Element sich der Fokus derzeit befindet.

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

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

594
ajm

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

pdate: Möglicherweise müssen Sie nicht das :focus Selektor. Wenn Sie ein Element haben, sagen Sie <div id="mydiv">stuff</div>, und du hast das äußere Leuchten auf diesem div-Element bekommen, wende es einfach wie normal an:

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

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

Durch das Festlegen von maximaler Höhe und maximaler Breite im Textbereich wird der visuelle Größenänderungspunkt nicht entfernt. Versuchen:

resize: none;

(und ja, ich bin damit einverstanden, dass "versucht wird, alles zu vermeiden, was die Erwartungen des Benutzers verletzt", aber manchmal macht es Sinn, d. h. im Kontext einer Webanwendung.)

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

-webkit-appearance: none;
13
Thomas Maas

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 erkläre Folgendes:

  • :focus bedeutet, 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 dasselbe.
5
MineCMD

Ich habe dies bei einem div erlebt, bei dem ein Klickereignis aufgetreten ist, und nach 20 Suchen habe ich dieses Snippet gefunden, das meinen Tag gerettet hat.

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

Deaktiviert die Hervorhebung der Standardschaltfläche in mobilen Webkit-Browsern.

4
Michael

Dies ist die Lösung für Personen, denen die Barrierefreiheit am Herzen liegt .

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

Lesen Sie diesen Artikel , dass ich geschrieben habe, um zu erklären, wie der Rand auf zugängliche Weise entfernt wird.

Kurz gesagt, die Gliederung soll nur angezeigt werden, wenn ein Tastaturbenutzer erkannt wird. Sobald ein Benutzer seine Maus benutzt, deaktivieren wir den Umriss. Als Ergebnis erhalten Sie das Beste aus beiden.

4
Wim Mostmans

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

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

manchmal passiert es auch, dass Schaltflächen 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;
}
1

Es hat sich als hilfreich erwiesen, den Umriss eines Eingabeknopfs vom Typ "Schiebetür" zu entfernen, da der Umriss nicht die rechte "Kappe" des Schiebetürbilds abdeckt und der Fokuszustand ein wenig wackelig wirkt.

input.slidingdoorbutton:focus { outline: none;}
0
richfinelli

Sicher! Sie können den blauen Rand auch von allen HTML-Elementen entfernen, indem Sie * verwenden.

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

Und

 *{
     outline: none;   
   }
0
Santosh Khalse
<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>
0
criss_ae

Ich musste diesen Effekt nur aus meinen Texteingabefeldern entfernen und konnte die anderen Techniken nicht richtig anwenden, aber das funktioniert für mich.

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

    }

Getestet in Firefox und in Chrome.

0
Martyn Shutt