当输入处于活动状态时如何使父元素获得框阴影

Question

我想做一个输入，如果输入是活动，那么父元素 会得到一个 box-shadow

这是我的代码：

.searchbar input:active .searchbar{
    box-shadow: 0 4px 24px 0 rgb(0 0 0 / 8%);
}

我想让 .searchbar 在 input（子元素）处于 active

时获得框阴影

Answer 1

您可以使用 focus-within

<div class="parent">
   The parent div
 <input class="input" />
</div>

.parent:focus-within {
   box-shadow: 0 4px 24px 0 rgb(0 0 0 / 8%);
 }

.parent {
  place-content: center;
  margin-top: 2%;
  margin-left: 2%;
  padding: 5px;
}

工作示例：codepen

当输入处于活动状态时如何使父元素获得框阴影

how to make parent element get box-shadow when an input is active

css

input

css-selectors