CSS - Verwijder rand om links en velden


De modernere browsers zetten een stippelijn om een link zodra je hier op klikt. Daarnaast plaatst Google Chrome bijvoorbeeld een gele rand om een invoerveld. De rand in het geval van zowel een link als een invoerveld is handig voor bijvoorbeeld mensen die geen muis kunnen gebruiken en daarom door een website navigeren middels de tabtoets. Door deze rand wordt de focus gelegd op een bepaalde link of veld zoals hieronder te zien is.

Verwijder stippellijn om link

Verwijderen

Het is mogelijk deze rand te verwijderen maar belangrijk om te noteren is wel dat je website daardoor minder goed toegankelijk is voor mensen met een bepaalde beperking.

Zoals aangegeven in een HTML tutorial is het mogelijk om deze lijn te verwijderen door een code toe te voegen een link. Echter, het is natuurlijk veel handiger om in een keer voor alle links of invoervelden deze rand van de browser te verwijderen met behulp van CSS. Het uitschakelen van de rand is door te voeren door de onderstaande code te gebruiken.

Alle randen verwijderen

:focus {
        outline:none;
}


Alleen verwijderen links

a:focus {
        outline: none;
}


Alternatieve opmaak

Het is wel zo dat je in de plaats van het bovenstaande alternatieve opmaak kunt instellen. Bijvoorbeeld zoals hieronder. In dit geval wordt er dan een oranje rand van 1px geplaatst om een link zodra geselecteerd met de tab. De opmaak kan bepaald worden naar wens.

a:focus {
        outline:thin dotted;
}