Strona główna >CSS >Leksykon CSS – właściwości, selektory, funkcje >:focus

:focus

selektor:focus

Działa na element, który właśnie przyjmuje wpisywanie z klawiatury: pole formularza, w które użytkownik pisze, albo link czy przycisk wybrany klawiszem Tab. Fokus ma na stronie zawsze najwyżej jeden element.

Wartości

Fokus mogą dostać:

linki z atrybutem href, przyciski, pola formularza, <summary> i elementy z contenteditable,
każdy element z tabindex="0" (także klawiszem Tab) albo tabindex="-1" (tylko skryptem przez focus()).

Przykłady

Pole, w które się pisze, ma niebieską ramkę i jasny kontur:

<input class="field" type="text" placeholder="Imię i nazwisko">

.field {
  padding: 8px;
  border: 1px solid #aaa;
  border-radius: 4px;
}
.field:focus {
  border-color: #0088d1;
  outline: 3px solid #b3e5fc;
}

Wynik

Wynik – z fokusem

Na co uważać

Nigdy nie zapisuj :focus { outline: none; } bez zastępstwa – użytkownicy klawiatury nie zobaczą wtedy, gdzie na stronie się znajdują (WCAG 2.4.7).
:focus działa też po kliknięciu myszą, gdzie mało kto chce kontur na przycisku. Wyraźny kontur należy więc raczej do :focus-visible.
To, czy kliknięcie myszą daje fokus przyciskowi lub linkowi, zależy od przeglądarki i systemu – w macOS według MDN nie dają go ani Safari, ani Firefox. Po kliknięciu nie polegaj więc na :focus.
Element, który nie może mieć fokusu (div, span bez tabindex), nie dostanie :focus nawet po focus() ze skryptu.

Obsługa w przeglądarkach

Baseline – szeroko dostępne: działa we wszystkich popularnych przeglądarkach, i to od dawna (najpóźniej od 2015 roku). Od wersji: Chrome 1, Firefox 1, Safari 1. Stan: październik 2026 (MDN browser-compat-data).

Zobacz też:
:focus-visible
:focus-within
outline
outline-offset
:hover