如何通过CSS实现input获焦时修改外层search_bar元素的样式？

你的需求完全可以通过CSS实现，核心是用:focus-within伪类——这个伪类专门用来匹配包含任意聚焦元素的父容器，完美适配你的HTML结构。

原代码的问题 #

你写的.search_bar .search_input:focus .search_bar选择器逻辑错误：CSS目前没有"子元素状态反向影响父元素"的选择器，这个写法是在找search_input聚焦时内部的search_bar子元素，显然不存在，所以完全不会生效。

修正后的完整CSS代码 #

.search_bar {
  display: flex;
  align-items: center;
  width: 90%;
  padding: 10px 8px;
  border-radius: 4px;
  background-color: #fff;
  border: 1px solid #222;
  /* 可选：添加过渡动画让边框变化更平滑 */
  transition: border-color 0.2s ease;
}
.search_bar .search_icon {
  width: 24px;
  height: 24px;
  background-image: url("https://png.pngtree.com/element_our/20200702/ourmid/pngtree-magnifying-glass-icon-image_2292648.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
.search_bar .search_input {
  width: 100%;
  border: 0;
  margin-left: 6px;
  font-size: 16px;
  /* 去掉input默认的聚焦轮廓，避免和父容器边框冲突 */
  outline: none;
}
/* 关键：当search_bar内部有元素聚焦时，修改自身边框 */
.search_bar:focus-within {
  border: 2px solid #ff4444; /* 这里设置你要的边框粗细和颜色 */
}
.search_bar .enter {
  white-space: nowrap;
}

原理说明 #

:focus-within会在search_bar容器内的任何元素（这里就是search_input）获得焦点时，触发容器的样式变化，完全不需要修改现有HTML结构，符合你的设计要求。

内容的提问来源于stack exchange，提问作者AWEI