Kevin Powell - Community•14mo ago

Is it possible to change the styling of a parent element when focusing on a child element?

I'm trying to change the background-color of the parent element when focus is applied to a child <input> element. When looking around I've only found solutions that involve changing an element that comes after the first element. My code:

 <div class="checker-input">
     <i class="checker-icon fa-duotone fa-magnifying-glass"></i>
     <input type="url" name="checker" id="checker" placeholder="Check je domein">
     <button href="http://" class="boxbutton">Checken</button>
</div>

 <div class="checker-input">
     <i class="checker-icon fa-duotone fa-magnifying-glass"></i>
     <input type="url" name="checker" id="checker" placeholder="Check je domein">
     <button href="http://" class="boxbutton">Checken</button>
</div>

So; when focus is applied to the <input> element I want something to happen to the <div>

3 Replies

Taro•14mo ago

You should use the :focus-within pseudo selector here is an example: https://codepen.io/taro-naza/pen/qBJqWdX

Taro-Naza

CodePen

qBJqWdX

...

Mathies•14mo ago

That worked, thank you so much!

Taro•14mo ago

You're welcome

Gaming

Programming

Is it possible to change the styling of a parent element when focusing on a child element?