Результат данного примера показан на рис. 1. При получении фокуса текстовое поле меняет цвет фона и цвет границы.
Рис. 1. Результат использования псевдокласса :focus
Браузеры
Chrome не добавляет стиль для селектора a , чтобы заставить его понимать правило a:focus , добавьте к тегу атрибут tabindex .
CSS по теме
Источник
:focus
CSS псевдокласс :focus применяется, когда элемент (такой как input формы) получает фокус. Обычно он активируется при клике мышью пользователем или при выборе элемента с использованием клавиши «tab» на клавиатуре.
/* Selects any when focused */ input:focus color: red; >
Примечание: Этот псевдокласс применяется только тогда, когда в фокусе находится сам элемент. Используйте :focus-within , если вы хотите выбрать элемент, в котором находится сфокусированный элемент.
Синтаксис
Пример
HTML
input class="red-input" value="Я буду красным, если на меня попадёт фокус"> input class="lime-input" value="Я буду лаймовым при фокусе">
CSS
.red-input:focus color: red; > .lime-input:focus color: lime; >
Результат
Проблемы доступности
Убедитесь что визуальный индикатор фокусировки хорошо виден людям с плохим зрением. Это также поможет любым другим людям, которые используют экран в ярко освещённом месте (например, на солнце). WCAG 2.1 SC 1.4.11 Non-Text Contrast (WCAG 2.1 SC 1.4.11 Нетекстовой контраст) требует, чтобы контраст визуального индикатора фокуса должен быть не менее 3 к 1.
:focus
Никогда не удаляйте фокусный outline (видимый индикатор фокуса), не заменяя его фокусным контуром подходящим под требования WCAG 2.1 SC 1.4.11 Non-Text Contrast
Спецификации
Поддержка браузерами
BCD tables only load in the browser
Смотрите также
Found a content problem with this page?
This page was last modified on 7 нояб. 2022 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
Источник
:focus
Сайтом можно пользоваться не только с использованием мышки, но и при помощи клавиатуры. При переключении клавишей Tab элементу добавляется псевдокласс :focus , и мы можем задать для него красивые стили.
Элементы формы могут получить фокус и при клике мышкой на него. Например, если кликнуть по кнопке или в поле ввода текста, то им будет добавлен псевдокласс :focus .
Важно! В браузерах Safari и Firefox на Mac при клике мышкой на кнопку фокус не устанавливается.
Пример
Скопировать ссылку «Пример» Скопировано
При попадании фокуса на кнопку будем показывать заметную белую обводку:
button:focus outline: 2px solid #ffffff; outline-offset: 3px;> button:focus outline: 2px solid #ffffff; outline-offset: 3px; >
Как пишется
Скопировать ссылку «Как пишется» Скопировано
После любого селектора ставим двоеточие и пишем ключевое слово focus .
a:focus outline: 2px solid hotpink;> a:focus outline: 2px solid hotpink; >
Как понять
Скопировать ссылку «Как понять» Скопировано
При попадании элемента в фокус браузер подставляет элементу дополнительный автоматический класс, чтобы пометить изменение состояния. Этому классу мы можем задавать любые стили, подходящие по дизайну. При этом логика подставления или удаления этого класса скрыта под капотом движка браузера.
Важно знать, что в стандартных стилях браузера уже прописаны дефолтные стили для фокуса интерактивных элементов. Например, в Google Chrome вокруг элемента появляется прямоугольная фиолетовая рамка. Стили для неё:
:focus outline: -webkit-focus-ring-color auto 1px;> :focus outline: -webkit-focus-ring-color auto 1px; >
Важно! Не удаляйте стили для фокуса полностью. Если вам не нравятся дефолтные стили — измените их. При полном удалении фокуса пользователь не будет понимать, в какой части страницы он находится, если его сценарий пользования сайтом отличается от привычного.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
💡 Смену стилей между состояниями можно анимировать при помощи transition 🎉
💡 В браузер встроены дефолтные стили для фокуса.
💡 Нельзя полностью удалять стили для фокуса, заменяйте их на свои, если дефолтные не нравятся.
💡 Стили для фокуса можно увидеть, открыв сайт и несколько раз нажав клавишу Tab . Или нажмите на кнопку, поставьте курсор в поле ввода.
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
🛠 В какой-то момент разработчики так разозлились на обводку, появляющуюся при фокусе, что начали её полностью убирать, переопределяя стандартные стили. Какое-то время это было очень распространено, но довольно быстро пришло осознание, что тем самым мы портим опыт пользования интернетом — как минимум, некоторым людям. Например, на момент написания этой статьи на сайте «Алиэкспресс» отключена обводка на интерактивных элементах. И если вы попробуете походить по сайту, используя клавиатуру, то не сможете понять, где находится ваш курсор в данный момент.
Не стоит думать, что абсолютно все, кто попадает в интернет, используют мышку для навигации. Есть люди с временно или постоянно ограниченными возможностями, которым гораздо комфортнее использовать для навигации по сайту клавиатуру. И они должны видеть, где именно в данный момент находится курсор.
Мы — разработчики — как создатели сайтов должны помнить, что пользовательские сценарии могут быть совершенно разные, и мы не в праве обделять ни одного из наших пользователей.
Если дизайнер не прорисовал в макете стили для фокуса, то вы можете оставить стандартные стили или аккуратно подобрать что-то подходящее под дизайн сайта.
Источник
Псевдокласс :focus
Псевдокласс :focus определяет стиль для элемента получающего фокус. Например, им может быть текстовое поле формы, в которое устанавливается курсор.
Синтаксис
Значения
HTML5 CSS2.1 IE Cr Op Sa Fx