:focusПсевдо - клас в CSS використовується для укладання елемента , який в даний час мішені клавіатури, або активоване з допомогою миші. Ось приклад:
textarea:focus ( background: pink; )Будь-який елемент (найчастіше s та s) знаходиться у фокусі, коли він виділений і готовий до введення тексту (наприклад, коли курсор блимає). Користувачі миші можуть натискати на них (або пов’язані з ними label), щоб сфокусуватись, а користувачі клавіатури можуть клацнути на них.
“Вкладки”
подальше використання :focusпсевдокласу - це «вкладка» елементів. Багато браузерів мають стандартний стан фокусування для вибору вкладки, який є пунктирним контуром. Видалити його досить просто, але обов’язково замініть його на відповідну альтернативу.
s, s, s, і textareas всі вони мають :focus стан за замовчуванням, але ви можете дати стан фокус на будь-який елемент в HTML. І атрибути, contenteditable і tabindexатрибути працюють для цього, як у цьому прикладі:
Пов’язані
Стаття від 12 травня 2017 рокуПсевдоклас `: focus-within`
Кріс Койєр
Підтримка браузера
Всі браузери підтримують базове використання :focus.