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

I want to make an input that if the input is active then the parent element will get a box-shadow

and this is my code :

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

I want to make .searchbar get box-shadow when input (child element) is active

CodePudding user response：

You can use focus-within

<div >
   The parent div
 <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;
}

Working example: codepen