Изменение цвета фона Fieldset с помощью вложенных полей ввода с помощью CSS

Question

Я использую это решение: Можно ли изменить цвет фона набора полей на входе: focus?

... чтобы изменить фон набора полей как пользователядвижется через форму.На базовом уровне это прекрасно работает.На более продвинутом уровне у меня возникают проблемы с выполнением этой работы над полями ввода, которые вложены в условный div.Другими словами, входные данные больше не являются родными элементами для div в его примере.

Для наглядности это работает:

<fieldset>
<input>
<div></div>
</fieldset>

Но это не так:

<fieldset> 
<div class="conditional"> 
<input> 
</div> 
<div></div> 
</fieldset>

Answer 1

На самом деле, вы можете теперь влиять на родителя ввода в фокусе с помощью

:focus-within

. Псевдокласс: focus-внутри CSS представляет элемент, который получилфокус или содержит элемент, который получил фокус.Другими словами, он представляет элемент, который сам соответствует псевдоклассу: focus или имеет потомка, которому соответствует: focus.(Это включает потомков в теневых деревьях.)

MDN

fieldset:focus-within {
  background: red;
}

<fieldset>
  <input>
</fieldset>