De :focuspseudo-klasse in CSS wordt gebruikt voor het opmaken van een element dat momenteel wordt aangevallen door het toetsenbord, of geactiveerd door de muis. Hier is een voorbeeld:
textarea:focus ( background: pink; )Elk element (meestal s en s) is in "focus" wanneer ze zijn geselecteerd en klaar om tekst in te voeren (zoals wanneer een cursor knippert). Muisgebruikers kunnen erop klikken (of hun gerelateerde label) om zich te concentreren, en toetsenbordgebruikers kunnen erin TAB'en.
"Tabben"
een ander gebruik van de :focuspseudo-klasse is "tabben" door elementen. Veel browsers hebben een standaardfocusstatus voor tabselectie, wat een gestippelde omtrek is. Het is vrij eenvoudig te verwijderen, maar zorg ervoor dat u het vervangt door een geschikt alternatief als u dat wel doet.
s s, sen textareas hebben allemaal de :focus staat standaard, maar u kunt een focus toestand te geven aan elk element in HTML. Zowel de contenteditable en tabindex attributen werken hiervoor, zoals in dit voorbeeld:
Verwant
Artikel op 12 mei 2017De `: focus-binnen` pseudo-klasse
Chris Coyier
Browser-ondersteuning
Alle browsers ondersteunen het basisgebruik van :focus.