Псевдокласс focus-within - стиль элементов в фокусе в CSS
Псевдокласс focus-within задает стиль
элементам, которые находятся в фокусе.
В отличие от псевдокласса focus, который задает
стиль непосредственно самому элементу, focus-within
задает стиль для элемента-родителя.
Синтаксис
селектор:focus-within {
}
Пример
Давайте зададим голубой цвет фону элемента-родителя, когда его дочерний элемент инпут находится в фокусе:
<div>
Введите ваше имя: <input name="user">
</div>
div {
width: 300px;
height: 50px;
padding: 10px;
}
div:focus-within {
background-color: #C2DDFD;
}
:
Смотрите также
-
псевдокласс
:indeterminate,
который задает стиль переключателям, которые находятся в неопределенном состоянии -
псевдокласс
:default,
который задает стиль элементам по умолчанию -
псевдокласс
:fullscreen,
который задает стиль элементам в полноэкранном режиме -
псевдокласс
:placeholder-shown,
который задает стиль элементам при отображении текста-подсказки -
свойство
caret-color,
которое задает цвет текстовому курсору в инпуте