输入焦点时给 <i> 标签背景

Question

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

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

<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 只有当它直接跟在 [=13= 之后时].

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

Within the elements of class container, look for any elements of class part, and inside that element, look for any input that has focus. If it's directly followed by an i element, color that red.

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

Answer 2

您可以更改 HTML 中 <input> 和 <i> 元素的顺序。将 .part 样式设置为 flexbox（或 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>

输入焦点时给 <i> 标签背景

Give background to <i> tag when input focus

html

css

forms

focus

input