CSS псевдокласс :focus-within
Псевдокласс :focus-within
применяет стиль к элементу, если элемент или любой его потомок находится в фокусе:
/* Выбор элемента, если сам элемент или его
потомок находится в фокусе */
:focus-within { background: yellow; }
Псевдокласс :focus-within
выбирает элемент, соответствующий псевдоклассу :focus
, или элемент, имеющий потомка, который соответствует псевдоклассу :focus
.
Пример
form {
padding: 0 20px;
border: 1px solid #1f7a1f;
}
form:focus-within { background: #ebfaeb; }
<form>
<h3>Вы любите пиццу?</h3>
<p><label>
<input type="radio" name="choice" value="yes">да
</label></p>
<p><label>
<input type="radio" name="choice" value="no">нет
</label></p>
<p>
<textarea rows="5" cols="40">
Прокомментируйте свой выбор!
</textarea>
</p>
</form>
Результат