输入框聚焦时为相邻<i>图标添加背景的实现问题求助

哦，我知道问题出在哪了！你用的相邻兄弟选择器+只能选中紧跟在目标元素后面的兄弟元素，可你的图标<i>是在<input>前面啊，所以input:focus + i根本找不到这个图标，样式自然不会生效～

下面给你几个可行的解决方案，按推荐程度排序：

方案1：使用:focus-within选择器（最推荐，无需修改HTML） #

:focus-within会选中包含有聚焦元素的父容器，这样我们就能通过父容器选中前面的图标了，完美适配你的现有HTML结构：

/* 当.part里的input获得焦点时，选中里面的i元素 */
.contact .part:focus-within i {
  background-color: #ff0000; /* 替换成你要的测试背景色 */
  color: red; /* 如果你还需要改图标的颜色 */
}

这个方法简单高效，现代浏览器（Chrome、Firefox、Safari 10.1+、Edge）都支持，不需要动任何HTML代码。

方案2：调整HTML结构，配合相邻兄弟选择器 #

如果你需要兼容更老的浏览器（比如IE），可以把图标放到input后面，再用CSS调整显示顺序，让它看起来还是在input左边：

修改后的HTML： #

<div class="part">
  <input type="text" name="contactName">
  <i class="fas fa-info-circle"></i>
</div>

对应的CSS： #

/* 用flex布局反转元素顺序，让图标显示在input左边 */
.contact .part {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 8px; /* 可以加个间距，让图标和input不挤在一起 */
}

/* 现在input在前面，相邻兄弟选择器就能生效了 */
.contact .part input:focus + i {
  background-color: #ff0000;
  color: red;
}

方案3：用JavaScript监听焦点事件（兼容最老浏览器） #

如果以上CSS方案都不满足你的需求，还可以用JS手动给图标添加/移除样式类：

JavaScript代码： #

// 获取对应的input和图标元素
const contactInput = document.querySelector('.contact .part input[name="contactName"]');
const infoIcon = document.querySelector('.contact .part i.fas.fa-info-circle');

// 监听input的聚焦事件，给图标加类
contactInput.addEventListener('focus', () => {
  infoIcon.classList.add('icon-focused');
});

// 监听input的失焦事件，移除图标上的类
contactInput.addEventListener('blur', () => {
  infoIcon.classList.remove('icon-focused');
});

对应的CSS： #

.contact .part i.icon-focused {
  background-color: #ff0000;
  color: red;
}

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