: fokus - CSS-tricks

Anonim

Den :focuspseudo klass i CSS används för styling ett element som för närvarande är riktad genom tangentbordet, eller aktiveras av musen. Här är ett exempel:

textarea:focus ( background: pink; )

Alla element (oftast s och s) är i “fokus” när de är markerade och redo att skriva in text (som när en markör blinkar). Musanvändare kan klicka på dem (eller deras relaterade label) för att fokusera, och tangentbordsanvändare kan TABLA in dem.

“Tabbing”

ingen annan användning av :focuspseudoklassen är "tabbing" genom element. Många webbläsare har ett standardfokusläge för flikval, vilket är en prickad kontur. Det är ganska enkelt att ta bort, men se till att ersätta det med ett lämpligt alternativ om du gör det.

s s,, soch textareas alla har :focus tillståndet som standard, men du kan ge ett fokusläge till alla element i HTML. Både contenteditable och tabindex attribut fungerar för detta, som i detta exempel:

Relaterad

Artikel den 12 maj 2017

Pseudoklassen `: fokus inom"

Chris Coyier

Webbläsarstöd

Alla webbläsare stöder grundläggande användning av :focus.