How to make :hover appearance remain after click/focus in search bar

Question

I've got a search bar made of three div-containers (magnifying glass icon, input box, arrow icon) within a bigger div. Currently I can hover over the search bar to give it a box-shadow but I want the box-shadow to remain when I click in the text box. Is this possible using just HTML/CSS or do I need to use JavaScript? I've tried using :focus but it doesn't seem to work.

.searchbarcontainer {
    width: 482px;
    height: 44px;
    border: 1px solid #dfe1e5;
    border-radius: 2px;
}

.searchbarcontainer:hover, .searchbarcontainer:focus {
    box-shadow: 0px 1px 5px #d9d9d9;
}

<div class="searchbarcontainer">    
    <div class="searchbar">
        <div class="magnifier">
            <img class="mag" src="images/magnifier.svg">
        </div>
        <input class="search" type="text">
        <div class="arrow">
            <img class="arw" src="images/arrow.svg">
        </div>
    </div>
</div>

Answer 1

All you need to do is add attribute tabindex (if you need to focus when click on any place on that div) and use :focus-within:

.searchbarcontainer {
    width: 482px;
    height: 44px;
    border: 1px solid #dfe1e5;
    border-radius: 2px;
}

.searchbarcontainer:hover {
    box-shadow: 0px 1px 5px #d9d9d9;
}

.searchbarcontainer:focus-within {
    box-shadow: 0px 1px 5px #d9d9d9;
    outline: none;
}

<!-- tabindex is not needed if you want to add shadow only when input is focused -->
<div class="searchbarcontainer" tabindex="1">    
    <div class="searchbar">
        <div class="magnifier">
            <img class="mag" src="images/magnifier.svg">
        </div>
        <input class="search" type="text">
        <div class="arrow">
            <img class="arw" src="images/arrow.svg">
        </div>
    </div>
</div>