Třída :focus
pseudo v CSS se používá pro styling prvku, který je aktuálně cílen klávesnicí nebo aktivován myší. Zde je příklad:
textarea:focus ( background: pink; )
Jakýkoli prvek (nejčastěji s a
s) je „zaostřen“, když je vybrán a je připraven k zadání textu (například když bliká kurzor). Uživatelé myši na ně mohou kliknout (nebo na související
label
), aby se mohli soustředit, a uživatelé klávesnice do nich TAB.
„Tabbing“
další použití :focus
pseudotřídy je „procházení tabulkami“ mezi prvky. Mnoho prohlížečů má výchozí stav fokusu pro výběr karty, což je tečkovaný obrys. Je poměrně snadné jej odstranit, ale pokud ano, nahraďte jej vhodnou alternativou.
s,
s
, s
a textareas
všichni mají :focus
stát ve výchozím nastavení, ale můžete dát stav zaostření jakéhokoli prvku HTML. Jak contenteditable
a tabindex
atributy práci pro to, jak je v tomto příkladu:
Příbuzný
Článek 12. května 2017Pseudo třída `: focus-within`
Chris CoyierPodpora prohlížeče
Všechny prohlížeče podporují základní použití :focus
.