如何让搜索框点击/聚焦后保持:hover阴影效果

嘿，这个问题我碰到过！仅用HTML/CSS完全能解决，不需要JavaScript——你需要的是CSS的:focus-within伪类，而不是原来的:focus。

为什么原来的:focus不生效？ #

.searchbarcontainer是个普通的div元素，默认不属于可聚焦元素（比如输入框、按钮这类表单控件才是），所以它永远不会触发:focus伪类。当你点击输入框时，获得焦点的是子元素<input>，而不是父容器，所以原来的写法自然不会生效。

解决方案：使用:focus-within伪类 #

:focus-within是CSS Selectors Level 4的特性，它会匹配元素本身或者它的任意子元素获得焦点的情况，正好完美匹配你的需求——点击输入框时，父容器的阴影持续保留。

修改后的CSS代码如下：

.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;
}

效果验证 #

• 鼠标悬停搜索栏：显示阴影
• 点击输入框（获得焦点）：阴影持续保留
• 点击页面其他区域（输入框失去焦点）：阴影消失（如果鼠标没悬停在容器上的话）

兼容性说明 #

:focus-within现在支持所有现代浏览器（Chrome、Firefox、Edge、Safari 10.1+），完全满足日常开发需求。如果一定要兼容非常老旧的浏览器（比如IE），才需要用JavaScript监听输入框的focus/blur事件，给父容器添加/移除自定义类，但这种场景现在几乎不需要考虑了。

完整的HTML代码和上面的CSS搭配使用即可实现你要的效果。

内容的提问来源于stack exchange，提问作者Mr.Lupine