input:focus { background-color: LightGreen; } W języku CSS zdefiniowano formatowanie dla pola edycyjnego. Tak formatowane pole edycyjne będzie miało...
input:focus { background-color: LightGreen; }W języku CSS zdefiniowano formatowanie dla pola edycyjnego. Tak formatowane pole edycyjne będzie miało jasnozielone tło
Pytanie z egzaminu CKE, czerwiec 2021 (arkusz EE.09-SG-21.06).
Pole będzie miało jasnozielone tło po kliknięciu w nie w celu wpisania tekstu. Pseudoklasa :focus opisuje element, który ma fokus, czyli przyjmuje w tej chwili dane z klawiatury. Pole dostaje fokus po kliknięciu myszą albo po przejściu do niego klawiszem Tab, a traci go po kliknięciu w inne miejsce. Do zapamiętania: :focus - element aktywny do wpisywania, :hover - kursor nad elementem, :first-child - pierwszy potomek rodzica. Wyróżnianie aktywnego pola ułatwia wypełnianie długich formularzy, zwłaszcza osobom korzystającym z klawiatury. Kolorowe tło aktywnego pola pomaga zobaczyć, gdzie trafią wpisywane znaki. Pokrewna pseudoklasa :focus-within wyróżnia cały formularz albo blok, w którym jest aktywne pole.
Łatwo pomylić :focus z :hover, bo obie reagują na użytkownika. Wskazanie pola kursorem bez kliknięcia to stan :hover - ta reguła go nie dotyczy. Pierwsze wystąpienie znacznika wybierałyby pseudoklasy :first-of-type albo :first-child, których w regule nie ma. Formatowanie „w każdym przypadku” dałby sam selektor input bez pseudoklasy. Reguła ma dopisek :focus, więc tło zmienia się tylko wtedy, gdy pole jest aktywne do wpisywania tekstu, a po kliknięciu gdzie indziej wraca do zwykłego wyglądu. Dobrze pamiętać, że fokus może mieć w danej chwili tylko jeden element strony. Gdy użytkownik przejdzie do kolejnego pola klawiszem Tab, poprzednie pole wróci do zwykłego tła, a zielone stanie się nowe. Najechanie myszą na pole bez kliknięcia nie przenosi fokusu, więc tło się nie zmieni. Aby reagować na kursor, trzeba by dopisać osobną regułę z :hover.