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
Taro2y ago
You should use the :focus-within pseudo selector here is an example: https://codepen.io/taro-naza/pen/qBJqWdX
Mathies
Mathies2y ago
That worked, thank you so much!
Taro
Taro2y ago
You're welcome
Want results from more Discord servers?
Add your server