Задать фон тегу <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, цвет которого красный.

В вашем случае CSS будет применяться только в том случае, если после ввода введен i.

Answer 2

Вы можете изменить порядок элементов <input> и <i> в HTML. Введите .part как flexbox (или 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>