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

Question

输入旁边有一个“图标”。我希望在单击输入时为该图标提供背景（在带有颜色的示例中，我只想对其进行测试）。

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

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

和CSS：

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

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

Answer 1

兄弟姐妹选择器（+）仅指向一个方向，因此，当您说foo + bar时，只有在其直接跟随bar时才选择foo。

从概念上讲，CSS的工作方式如下：

  

在类container的元素内，查找类part的任何元素，在该元素内，查找具有焦点的任何输入。如果紧跟着i元素，则将其涂成红色。

对于您而言，仅在输入后输入i时才适用CSS。

Answer 2

您可以更改HTML中<input>和<i>元素的顺序。将样式.part设置为弹性框（或inline-flex），然后在order: 1上使用<input>，以视觉方式将其放置在<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>