使用CSS使用嵌套输入字段更改字段集的背景颜色

Question

我使用此解决方案： Is it possible to change a fieldset's background-color on input:focus?

...当用户在表单中移动时更改字段集的背景。在基础层面上，这很有效。在更高级的层面上，我无法在嵌套在条件div中的输入字段上进行此工作。换句话说，在他的例子中，输入不再是div的兄弟。

为了给你一个视觉效果，这有效：

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

但这不是：

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

Answer 1

实际上，您可以现在影响焦点输入的父级

:focus-within

  

焦点在CSS伪类中表示已获得焦点或包含已获得焦点的元素的元素。换句话说，它表示一个元素，它本身与：focus伪类匹配，或者有一个与：focus匹配的后代。 （这包括阴影树中的后代。）

     

an online IEEE754 converter

fieldset:focus-within {
  background: red;
}

<fieldset>
  <input>
</fieldset>