如何制作:在搜索栏中单击/聚焦后，悬停外观保持不变

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>