Привлекайте внимание пользователя с помощью селектора CSS :focus-within

От автора: вы можете использовать селектор :focus-within для стилизации родителя выделенного фокусом элемента.

Это позволяет создавать пользовательский интерфейс интерактивной формы без единой строчки JavaScript. Попробуйте пример ниже:

Этот пример использует :focus-within, плюс псевдо-селектор ::before и некоторую магию позиционирования. Мы рассмотрим детали, но вы можете проверить полный источник ниже.

Селектор :focus-within + псевдоэлементы ::before + абсолютное позиционирование

Все в одном блоке объявлений! Давайте посмотрим на самую важную часть этого примера.

body:focus-within

Этот селектор будет применять стили всякий раз, когда есть фокус … в body! Да, :focus-within работает с любым элементом. Мы берем body только для этого примера.

Вы можете проявить изобретательность и придумать .буквальноЛюбойЭлемент:focus-within и использовать этот селектор, как вам нравится.

body:focus-within::before + абсолютное позиционирование

В нашем примере это означает, что всякий раз, когда какое-либо поле сосредоточено на теле, псевдоэлемент ::before будет создан с этими стилями:

Свойство content: » требуется для псевдоэлементов, а все остальное — это свойства, используемые для создания темного прозрачного наложения, заполняющего весь экран!

Дополнительные инструменты для правильной работы

Имейте в виду, что вам все равно нужно сделать пару настроек, чтобы наложение работало идеально.

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

position: relative; гарантирует, что наложение будет отображаться под формой. И это все, что касается небольшого трюка на этой неделе. Спасибо за прочтение!

Автор: Vitor Paladini

Источник: dev.to

Редакция: Команда webformyself.

Комментарии Вконтакте:

Комментарии запрещены.