Изменение вида родителя при фокусе дочернего элемента CSS

Быстрый ответ

В CSS прямой воздействие на стиль родительского элемента при получении дочерним фокуса не предусмотрено. Но преодолеть данное ограничение можно при помощи невидимого чекбокса и селекторов соседних элементов. Ниже приведён пример, демонстрирующий этот метод:

<div>
  <input type="checkbox" id="toggle" class="invisible">
  <label for="toggle" class="child">Нажми меня, чтобы научить родителя новым трюкам</label>
  <div class="parent">Я родитель, и я готов к новым урокам!</div>
</div>

.invisible {
  position: absolute;
  opacity: 0;
}

.invisible:focus + .child + .parent {
  background-color: yellow;
}

Фокусировку на элемент 'label' через клик переводит на чекбокс, включая изменение визуального состояния элемента с классом 'parent'. Фокус и структура документа здесь используются для косвенной стилизации родительского элемента.

Увеличение удобства работы с :focus-within

Псевдокласс :focus-within позволяет стилизовать родительский элемент, когда фокус установлен на одном из его дочерних элементов. Это преимущественно улучшает взаимодействие пользователя с формами:

fieldset:focus-within {
  border: 2px solid blue;
}

legend:focus-within {
  color: green;
}

Совместимость с браузерами можно проверить на caniuse.com. :focus-within значительно повышает доступность интерфейса, позволяя выделить активные элементы форм без применения JavaScript.

Использование JavaScript для более старых подходов

Если :focus-within не подойдёт для вашего проекта, возможно привлечь JavaScript. Он позволяет динамически добавлять или удалять класс 'focused' у родительского элемента в ответ на события фокус и потеря фокуса дочернего элемента:

let parent = document.querySelector('.parent');
let child = parent.querySelector('.child');

child.addEventListener('focus', () => parent.classList.add('focused'));
child.addEventListener('blur', () => parent.classList.remove('focused'));

Подробнее об этом расскажет наш спикер на видео

Преобразование метки в поле ввода

Благодаря CSS можно создать визуальные преобразования, такие как переход метки в текстовое поле при получении фокуса:

label {
  /* Визуально сходна с обычным текстом до момента фокусировки */
}

label:focus-within input[type="text"] {
  /* Включение трансформации при фокусе */
}

Применение ng-blur в Angular

В контексте Angular директива ng-blur пригодится для возврата поля ввода в изначальное состояние после потери фокуса и скрытия его меточного представления.

Переключение режимов с помощью contenteditable

Атрибут contenteditable облегчает переключение между режимами просмотра и редактирования, исключая необходимость в дополнительных преобразованиях:

<label contenteditable="true">Я редактируем. Нажми и попробуй.</label>

Этот метод упрощает взаимодействие пользователя с элементом. Тем не менее, помните, что управление состоянием такого элемента может отличать от применяемого в формах.

Визуализация

Представим семейное фото на стене. Когда вы фокусируетесь на одном из членов семьи, всё фото выделяется вот так:

👨‍👩‍👧‍👦🖼️ До фокусировки: Фото в мягком освещении. 👨‍👩‍👧‍👦🎇 После фокусировки: При нацеливании света прожектора (🔍) на кого-то, фотография становится светлее!

Фокус на отдельном лице (🔍) ассоциируется с фокусом на дочернем элементе, в том время как изменение освещённости фотографии символизирует изменение состояния родительского элемента.

Развёрнутые примеры и рекомендации

Для понятия предложенных подходов изучите интерактивные примеры с использованием :focus-within в CSS и JavaScript на jsfiddle. Обращайте внимание на воздействие использования JavaScript на доступность и производительность, если сравнивать с решениями на чистом CSS.

Грамотное сочетание :focus-within с псевдоклассом :not даст более тонкий контроль:

.parent:not(:focus-within) {
  /* Стилизация, проводимая когда ни один из дочерних элементов не фокусирован */
}

Учтите нюансы работы с атрибутом contenteditable, например, возможную нежелательную потерю фокуса, которые могут оказать значительное влияние на взаимодействие пользователя с веб-страницей.

Рекомендации по разработке программного обеспечения

В сложных проектах применяйте готовые библиотеки или фреймворки для управления состояниями. Они предлагают систематизированные подходы к отслеживанию изменений состояний, наступающих вследствие действий пользователя.

Полезные материалы

1. :focus – CSS: Каскадные таблицы стилей | MDN — Исчерпывающая информация о псевдоклассе :focus и принципах его функционирования.
2. :focus-within | CSS-Tricks — Разъяснение принципов работы псевдокласса :focus-within и методов его использования.
3. Can I use... Support tables for HTML5, CSS3, etc — Таблицы совместимости CSS-псевдокласса :focus-within с современными браузерами.
4. Selectors Level 4 — Законодательная спецификация CSS псевдокласса :focus-within от W3C.
5. Обозначение фокуса для улучшения доступности – Mozilla Hacks — Как оптимизировать доступность интерфейса с помощью фокуса.