От автора: вы можете использовать селектор :focus-within для стилизации родителя выделенного фокусом элемента.
Это позволяет создавать пользовательский интерфейс интерактивной формы без единой строчки JavaScript. Попробуйте пример ниже:
Этот пример использует :focus-within, плюс псевдо-селектор ::before и некоторую магию позиционирования. Мы рассмотрим детали, но вы можете проверить полный источник ниже.
Селектор :focus-within + псевдоэлементы ::before + абсолютное позиционирование
Все в одном блоке объявлений! Давайте посмотрим на самую важную часть этого примера.
body:focus-within::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7);
}body:focus-within
Этот селектор будет применять стили всякий раз, когда есть фокус … в body! Да, :focus-within работает с любым элементом. Мы берем body только для этого примера.
Вы можете проявить изобретательность и придумать .буквальноЛюбойЭлемент:focus-within и использовать этот селектор, как вам нравится.
body:focus-within::before + абсолютное позиционирование
В нашем примере это означает, что всякий раз, когда какое-либо поле сосредоточено на теле, псевдоэлемент ::before будет создан с этими стилями:
content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7);
Свойство content: » требуется для псевдоэлементов, а все остальное — это свойства, используемые для создания темного прозрачного наложения, заполняющего весь экран!
Дополнительные инструменты для правильной работы
Имейте в виду, что вам все равно нужно сделать пару настроек, чтобы наложение работало идеально.
html,
body { height: 100vh;
}Это гарантирует, что оверлей заполняет весь экран, даже если на странице недостаточно контента.
form { position: relative;position: relative; гарантирует, что наложение будет отображаться под формой. И это все, что касается небольшого трюка на этой неделе. Спасибо за прочтение!
Автор: Vitor Paladini
Источник: dev.to
Редакция: Команда webformyself.