:focus
Pasuje do elementu, który ma fokus, czyli przyjmuje teraz dane z klawiatury, np. do klikniętego pola formularza.
Przykład
#.input {
border: 1px solid #52525b;
transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus {
border-color: #a78bfa;
box-shadow: 0 0 0 3px rgb(167 139 250 / 0.35);
outline: 2px solid transparent;
}<label style="display: grid; gap: 6px;">
Adres e-mail
<input class="input" type="email" placeholder="Kliknij w pole" style="padding: 10px 12px; border-radius: 10px; background: #18181b; color: inherit; font: inherit;">
</label>Przezroczysta obwódka nie jest widoczna na co dzień. W trybie wysokiego kontrastu systemu Windows cienie znikają, a obwódka dostaje kolor systemowy, więc fokus nadal widać.
Definicja i zastosowanie
#Element ma fokus, gdy to do niego trafiają naciśnięcia klawiszy. Fokus dostają pola formularzy po kliknięciu, a także linki, przyciski i inne elementy interaktywne podczas przechodzenia klawiszem Tab. W danej chwili fokus ma najwyżej jeden element na stronie.
Pseudoklasa :focus pasuje zawsze, gdy element ma fokus, bez względu na to, jak go dostał. W wielu przeglądarkach przycisk kliknięty myszą też go dostaje, dlatego obwódka po kliknięciu bywa uznawana za brzydką. Rozwiązaniem nie jest outline: none, tylko :focus-visible, które pokazuje wskaźnik wtedy, gdy jest potrzebny.
Zwykłe elementy, takie jak div, nie przyjmują fokusu. Zmienisz to atrybutem tabindex="0", który dodaje element do kolejki klawisza Tab, albo tabindex="-1", przy którym element da się ustawić w fokusie kliknięciem lub skryptem, ale Tab go pomija. Aby ostylować kontener, gdy fokus ma coś w jego środku, użyj :focus-within.
Składnia
#selektor:focus { właściwość: wartość; }Typowe zastosowania
#- Kliknij w pole: pojawia się fioletowa obwódka. Kliknij obok, a obwódka zniknie.
- Kliknij przycisk myszą. W większości przeglądarek on też dostaje fokus, więc obwódka pojawia się nawet po kliknięciu.
- Zwykły
divz atrybutemtabindex="0"też może mieć fokus. Kliknij go albo dojdź do niego klawiszem Tab. - Bez niczego przed dwukropkiem reguła dotyczy każdego elementu z fokusem. Kliknij w podgląd i przechodź klawiszem Tab.
Typowe zastosowania w praktyce
#input:focus
input:focus {
outline: 2px solid #a78bfa;
outline-offset: 2px;
}[tabindex]:focus
div z atrybutem tabindex="0" też może mieć fokus. Kliknij go albo dojdź do niego klawiszem Tab.[tabindex]:focus { background: #7c3aed; color: #fff; }:focus
:focus {
outline: 2px dashed #10b981;
outline-offset: 3px;
}Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Nigdy nie usuwaj wskaźnika fokusu bez zamiennika. Jeśli obwódka po kliknięciu przeszkadza, przenieś styl do
:focus-visiblezamiast pisaćoutline: none. - Wskaźnik fokusu musi być dobrze widoczny. Wytyczne dostępności zalecają kontrast co najmniej 3:1 względem otoczenia.
- Kolejność fokusu wynika z kolejności elementów w HTML. Nie zmieniaj jej dodatnimi wartościami
tabindex, tylko uporządkuj kod.
Powiązane hasła
#- :focus-visiblePasuje do elementu z fokusem wtedy, gdy przeglądarka uzna, że wskaźnik powinien być widoczny, np. przy nawigacji klawiaturą.
- :focus-withinPasuje do elementu, który sam ma fokus albo zawiera element z fokusem. Pozwala wyróżnić cały formularz lub kartę.
- :hoverPasuje do elementu, nad którym znajduje się kursor myszy. Podstawa efektów najechania na przyciski, linki i karty.
- :activePasuje do elementu w chwili aktywacji, najczęściej gdy przycisk myszy jest wciśnięty nad przyciskiem lub linkiem.
- outlineRysuje obwódkę wokół elementu, która nie zajmuje miejsca w układzie.
Widzisz błąd albo brakuje przykładu? Napisz do nas.