点击输入框时修改Font Awesome图标的颜色

嘿，我明白你现在遇到的困扰了：点击输入框时能成功修改边框颜色，但就是没法让里面的Font Awesome图标跟着变色，input:focus i或者input:focus .fa都不生效，对吧？这其实是CSS选择器的匹配逻辑在搞鬼，咱们一步步来解决：

为什么原来的选择器不生效？ #

CSS的选择器是向下/向后匹配的——input:focus i这种写法，是想选中input元素在聚焦状态下的子元素i，但通常咱们的图标是和input同级的兄弟元素（比如放在同一个.input-icons容器里），或者在input的前面，这时候input:focus根本没法直接选中它的兄弟图标元素。

最稳妥的解决方案：用:focus-within伪类 #

:focus-within是CSS的一个实用伪类，它会匹配包含有焦点元素的父容器。当你的输入框获得焦点时，它的父容器.input-icons会触发这个伪类，这时候咱们就能轻松选中容器里的图标了。

步骤1：确认你的HTML结构（大概是这样） #

<div id="signInForm">
  <div class="input-icons">
    <i class="fa fa-user"></i> <!-- Font Awesome图标 -->
    <input type="text" placeholder="用户名" />
  </div>
</div>

步骤2：修改CSS代码 #

把原来的input:focus i换成父容器的:focus-within来选中图标，同时保留输入框的边框样式：

* { 
  margin: 0; 
  padding: 0; 
  outline: 0; 
  box-sizing: border-box; 
}

#signInForm .input-icons {
  position: relative;
  display: inline-block;
}

/* 输入框聚焦时修改边框颜色 */
#signInForm .input-icons input:focus {
  border-color: #007bff; /* 你想要的聚焦边框色 */
  /* 可以再加个阴影增强效果 */
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}

/* 父容器包含聚焦元素时，修改图标颜色 */
#signInForm .input-icons:focus-within i {
  color: #007bff; /* 和边框色一致的图标聚焦色 */
}

额外排查点 #

如果还是不生效，可以检查这两个地方：

• 有没有其他优先级更高的CSS规则覆盖了图标颜色？比如#signInForm i这种更具体的选择器，可以给聚焦状态的选择器加更高优先级（比如再加个类名），或者临时用!important测试（不推荐长期使用）。
• 确认Font Awesome的图标元素确实在.input-icons容器里面，没有嵌套错误。

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