Gestrichelte Linien um den Link ... wie man Ihn los wird!

Hier sehen Sie ein Beispiel, eines Buttons den bei klick eine gestrichelte Linie umgibt. Optisch nicht gerade ansprechend. So mancher Webdesigner mag diese Linien überhaupt nicht. Es ist eine in fast jedem Browser vorhandene Option, um den Fokus auf einen Link zu symbolisieren. Vor allem bei Geräten ohne Maus (Smartphone und Tablett) oder bei der Navigation mit Tastatur (Tab-Taste) kann dieser Fokus sehr sinnvoll sein. Denn nur so bekommt man Rückmeldung, wo man gerade den Fokus hat. Ich selbst empfinde diese Umrandungen gerade bei den Akkordeon Bereichsüberschriften (accordeon toggler) in Contao als störend.

Wer diesen focus nun trotz sinnvollem Hintergrund entfernen möchte, nutzt einfach des CSS Baustein:

a:focus {
    outline:none;
}

Wie erwähnt sollte man dies aber gut überdenken. Eine Webseite die Barrierefrei sein soll, oder eine große Besuchermenge abdecken soll, kann diese Focus-Option gut gebrauchen und behindert dann eine bestimmte Anzahl an Besuchern. Wer dies nicht will, sollte Abstand davon nehmen den focus zu entfernen.

Es ist aber auch möglich den focus bewusst für einen Button oder Link zu setzen, so wie es im bootstrap.css gemacht wird (siehe unten). Möchte man diesen focus nicht und nutzt das bootstrap-Grid, muss man diese Anweisung raus nehmen.

button:focus {
    outline: 1px dotted;
    outline: 5px auto -webkit-focus-ring-color;
}

Zurück