:focusПсевдо - класс в CSS используется для укладки элемента , который в настоящее время мишени клавиатуры, или активированный с помощью мыши. Вот пример:
textarea:focus ( background: pink; )Любой элемент (чаще всего s и s) находится в «фокусе», когда они выделены и готовы ввести текст (например, когда курсор мигает). Пользователи мыши могут щелкнуть их (или связанные с ними label) для фокусировки, а пользователи клавиатуры могут нажимать на них TAB.
«Табуляция»
еще одно использование :focusпсевдокласса - это «табуляция» по элементам. Многие браузеры имеют состояние фокуса по умолчанию для выбора вкладки, которое представляет собой точечный контур. Его довольно легко удалить, но обязательно замените его подходящей альтернативой.
s, s, s, и textareas все они имеют :focus состояние по умолчанию, но вы можете дать состояние фокус на любой элемент в HTML. Для этого работают атрибуты contenteditable и tabindex, как в этом примере:
Связанный
Статья от 12 мая 2017 г.Псевдокласс `: focus-within`
Крис Койер
Поддержка браузера
Все браузеры поддерживают базовое использование :focus.