Ostatnio edytowany:

:focus

Autor: Virtual Patriot

Przeznaczenie selektora :focus

      :focus { ... }
    

Selektor :focus odwołuje się do elementu HTML, którego cechy w danym momencie spełniają zasadę pseudoklasy :focus.

Cechy elementu HTML spełniają zasadę pseudoklasy :focus, gdy w danym momencie dany element HTML jest elementem HTML, na którym skupił się użytkownik (na przykład za pomocą przycisku TAB lub poprzez kliknięcie na dany element HTML) lub gdy w danym momencie dany element HTML jest elementem HTML, na którym powinien skupić się użytkownik (na przykład dlatego że w danym momencie dany element HTML posiada atrybut autofocus).

W tym samym dokumencie HTML w tym samym momencie maksymalnie tylko jeden element HTML może spełniać zasadę pseudoklasy ":focus".

Dodatkowe techniczne informacje o selektorze :focus

ograniczenie - elementy HTML
ograniczenie - właściwości CSS
  • brak

Przykładowa reguła CSS, selektor :focus

input:focus {
  background-color:red;
}

Wyjaśnienie przykładowej reguły CSS

      input:focus { background-color:red; }
    
input:focus

Do każdego elementu input, którego cechy w danym momencie spełniają zasadę pseudoklasy :focus

background-color

dodaj właściwość CSS, która zmieni kolor tła elementu HTML

red

na barwę czerwoną

Kod źródłowy przykładowego dokumentu HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      input:focus {
        background-color:red;
      }
    </style>
  </head>

  <body>

    <label>
      Podaj dowolny ciąg znaków: <input type="text">
    </label>

    <hr>

    <label>
      Podaj nazwę koloru: <input type="text">
    </label>

  </body>
</html>

Rezultat


Tylko na czas wprowadzania własnego tekstu do interesującego nas element "input" (czyli tylko na czas skupienia się na interesującym nas elemencie "input") wspomniany element "input" będzie posiadał czerwony kolor tła.

Interpretacja selektora :focus

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 8

Edge

tak