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

Question

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

This is currently impossible with CSS. See https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — Zach Jensz, Apr 27 '22 at 04:52

score 0 · Accepted Answer · answered Apr 27 '22 at 04:59

You can use 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;
}

Working example: codepen

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

1 Answers1