输入焦点时为 <i> 标签提供背景答案

【问题标题】：Give background to <i> tag when input focus输入焦点时为 <i> 标签提供背景
【发布时间】：2019-10-30 13:06:28
【问题描述】：

输入旁边有一个“图标”。我希望当我点击输入时，给该图标一个背景（在我只想测试它的颜色的示例中）。

我已经尝试了一些我在这里找到的答案，但没有奏效。

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

还有 CSS：

.contact .part input:focus + i {
   color: red;
}

当我尝试使用标签时，没有 + 符号或其他东西，它也不起作用。不知道是什么问题。

【问题讨论】：

【解决方案1】：

同级选择器 (+) 仅指向一个方向，因此当您说 foo + bar 时，只有当它直接跟随 foo 时，您才会选择 bar。

从概念上讲，CSS 的工作原理如下：

在container 类的元素中，查找part 类的任何元素，然后在该元素中查找任何具有焦点的输入。如果它后面直接跟一个 i 元素，则将其涂成红色。

在您的情况下，CSS 仅在 i 出现在输入之后才适用。

【讨论】：

我不知道。谢谢！
没问题！除非您需要支持 IE 和 Edge，否则对您来说一个好的解决方案是使用 :focus-within，例如：.part:focus-within i { color: red; }。如果你确实需要支持 IE 和 Edge，你仍然可以用一个简单的 polyfill 来使用它：gist.github.com/aFarkas/a7e0d85450f323d5e164

【解决方案2】：

您可以更改 HTML 中 <input> 和 <i> 元素的顺序。将.part 设置为弹性框（或inline-flex），然后在<input> 上使用order: 1 将其视觉定位在<i> 之后。现在input:focus + i 可以工作了：

.part {
  display: flex;
  justify-content: flex-start;
}

.part input {
  order: 1;
}

.part input:focus + i {
  color: red;
}

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

【讨论】：