专注于输入时图标颜色不会改变答案

【问题标题】：Icon color not changing when focusing on input专注于输入时图标颜色不会改变
【发布时间】：2021-07-24 15:22:29
【问题描述】：

当我专注于我的输入时，我在这里尝试了几种方法来让字体很棒的图标变成白色......但似乎没有任何效果。

我的代码如下所示：

HTML

<div id="container">
  <form id="form">
    <input type="password" placeholder="Code" required id="input">
    <div class="icon"><i class="fas fa-user-secret"></i></div>
    <hr>
    <br>
    <center>
      <button id="submit" type="submit">Submit</button>
    </center>
  </form>
</div>

我已经尝试过：

input:focus + .fas-fa-user-secret {
    color: #fff;
}

input:focus + .fas {
    color: #fff;
}

input:focus + .i {
    color: #fff;
}

但是上面的 CSS 代码都不起作用。甚至输入中的文本都不是白色的，但是每当我删除 + 和其余部分时，它都可以用于输入。

对此的任何帮助表示赞赏，查看了有关在专注于输入时使图标具有不同颜色的每个线程。

谢谢。

【问题讨论】：

标签： html css

【解决方案1】：

您需要使用input:focus+.icon，因为您的图标位于.icon div 中。

input:focus+.icon {
  color: #ff0000;
}

input:focus {
  color: red;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div id="container">
  <form id="form">
    <input type="password" placeholder="Code" required id="input">
    <div class="icon"><i class="fas fa-user-secret"></i></div>
    <hr>
    <br>
    <center>
      <button id="submit" type="submit">Submit</button>
    </center>
  </form>
</div>

【讨论】：

现在图标颜色好了，但是输入文本没有改变颜色..？
@ZeeStra 您需要为其添加另一个规则。查看更新的答案。

【解决方案2】：

问题是您使用的是通用兄弟组合器，它在它之后选择其兄弟，这是<div>，而不是图标。

input:focus + .fas-fa-user-secret {
    color: #fff;
}

您可能想要做的是将color: inherit设置为图标，然后通过此CSS选择器为div设置所需的颜色，就可以了

input:focus + div {
    //your style
}

【讨论】：