Blaue Outline

Blaue Umrandung von Input Elementen entfernen

Jeder Browser bringt sein eigenes Grundlayout mit sich – doch was tun wenn der Layouter zweimal klingelt?

Die blaue Outline bei input[type="text"] und textarea im Safari sowie Firefox und im Opera zusätzlich bei Buttons, Checkboxen und Radiobuttons sieht zwar schön aus – ist aber bei manchen CSS Layouts nicht gut durchdacht. So wird die Umrandung beim focus in Verbindung mit overflow: hidden im Elternelement oder durch angrenzende Elemente einfach abgeschnitten. Und meistens benötigt man für die Inputfelder ein anderes Layout. Also weg mit der blauen Outline:

:focus {
    outline: 0;
} /* SAFARI */

/* FIREFOX + OPERA
es reicht eine Definition des Backgrounds oder der Border aus um die blaue Outline zu entfernen */
input,
button,
textarea {
        background: #fff;
        border: 1px solid #000;
}
Impressum