Как установить focus на элемент?

Question

[Михаил Р.]

Приветствую!

Создал группу иконка+input. Проблема в том, что hover и active - работает, а вот focus нет.
Подскажите, как решить проблему?

Спасибо!

Answer 1

[ⓒⓢⓢ]

вариант 1.
сделать иконку с абсолютным позиционированием, а стиль бордера перенести в инпут (псевдокод)

input {
  padding: 10px 10px 10px 48px;
  border: 1px solid lightgray;
}
input:focus {
  border-color: red;
}

вариант 2.
Сделать слой бордер после инпута и использовать селектор соседей (псевдокод)

input:focus + div.border {
  border-color: red;
}