Результат данного примера показан на рис. 1. При получении фокуса текстовое поле меняет цвет фона и цвет границы.
Рис. 1. Результат использования псевдокласса :focus
Браузеры
Chrome не добавляет стиль для селектора a , чтобы заставить его понимать правило a:focus , добавьте к тегу атрибут tabindex .
CSS по теме
Источник
:focus-within
CSS Псевдо-класс :focus-within соответствует элементу, который либо сам находится в фокусе, либо содержит элемент, который находится в фокусе. Другими словами, он представляет элементу, который соответствует псевдоклассу :focus либо имеет потомка, который соответствует :focus . (Включая потомков в shadow trees (en-US) .)
/* Выделяет когда один из его потомков находится в фокусе */ div:focus-within background: cyan; >
Этот селектор может оказаться полезным, например, для подсвечивания всего контейнера , когда пользователь устанавливает фокус на одном из его полей ввода .
Синтаксис
Пример
В этом примере форма раскрашивается при помощи специального правила стилей, когда один из её дочерних полей для ввода находится в фокусе.
HTML
p>Try typing into this form.p> form> label for="given_name">Given Name:label> input id="given_name" type="text"> br> label for="family_name">Family Name:label> input id="family_name" type="text"> form>
CSS
form border: 1px solid; color: gray; padding: 4px; > form:focus-within background: #ff8; color: black; > input margin: 4px; >
Итог
Спецификации
Совместимость с браузерами
BCD tables only load in the browser
See also
Found a content problem with this page?
This page was last modified on 13 авг. 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 — within
Псевдокласс :focus — within применяется к элементам, которые либо сами находятся в фокусе, либо имеют дочерние элементы в фокусе.
Пример
Скопировать ссылку «Пример» Скопировано
form:focus-within background-color: #282A2E;> form:focus-within background-color: #282A2E; >
Как пишется
Скопировать ссылку «Как пишется» Скопировано
После любого селектора ставим двоеточие и пишем ключевое слово focus — within :
.input:focus-within outline: 2px solid hotpink;> .input:focus-within outline: 2px solid hotpink; >
Как понять
Скопировать ссылку «Как понять» Скопировано
Псевдокласс :focus — within используется в двух случаях:
- если к этому элементу применяется псевдокласс :focus ;
- если к потомку этого элемента применяется псевдокласс :focus .
Причём потомок не обязательно должен быть прямым. Например, в примере с формой все теги были сначала вложены в и только потом — в . Несмотря на это, :focus — within применился к форме.
Источник
: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.
Источник