Focusing on one element, changes other element's CSS

Question

Let's have a look at this very simple code:

<div class="search-box">
    <input type="text" class="input-search">
</div>

What I'm trying to achieve?

When I'm in :focus on the .input-search, I want it to change the background-color of the whole .search-box

I did try this but it seems to not work because I am probably selecting something wrong:

.input-search:focus{
    background-color: #fff;
}

However, I have no idea how to apply this same effect to the .search-box class.

Thanks for any help yall!

@InSync read **all** the duplicate and you will find `focus-within` as one answer there. (it's the third answer, you don't need to read a lot) — Temani Afif, Apr 13 '23 at 11:35

score 1 · Accepted Answer · answered Apr 13 '23 at 10:46

CSS cannot traverse up the DOM, so :focus can only be used for styling the specifically focused element. There is however :focus-within (MDN page) which will allow you to style a parent element containing a focused element.

.search-box:focus-within {
    background-color: #f00;
}

<div class="search-box">
    <input type="text" class="input-search">
</div>

Focusing on one element, changes other element's CSS

1 Answers1