如何使搜索栏中 click/focus 后的悬停外观保持不变

Question

我有一个由三个 div 容器（放大镜图标、输入框、箭头图标）组成的搜索栏，其中包含一个更大的 div。目前，我可以将鼠标悬停在搜索栏上为其提供 box-shadow，但我希望在单击文本框时保留 box-shadow。这可能只使用 HTML/CSS 还是我需要使用 JavaScript？我试过使用 :focus 但它似乎不起作用。

.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

你需要做的就是添加属性tabindex（如果你需要在点击div上的任何地方时获得焦点）并使用: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>

如何使搜索栏中 click/focus 后的悬停外观保持不变

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

javascript

html

css

focus

onfocus