Mike_Ro
@Mike_Ro
$ run войтивайти

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

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

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

Спасибо!
  • Вопрос задан
  • 356 просмотров
Решения вопроса 2
JRK_DV
@JRK_DV
Рецепты https://codepen.io/jrkdv/full/LKLXdq
вариант 1.
сделать иконку с абсолютным позиционированием, а стиль бордера перенести в инпут (псевдокод)
input {
  padding: 10px 10px 10px 48px;
  border: 1px solid lightgray;
}
input:focus {
  border-color: red;
}


вариант 2.
Сделать слой бордер после инпута и использовать селектор соседей (псевдокод)
input:focus + div.border {
  border-color: red;
}
Ответ написан
Mike_Ro
@Mike_Ro Автор вопроса
$ run войтивайти
Как вариант - псевдо-класс :focus-within:

.label:active,
.label:focus,
.label:focus-within {
  border-color: red;
}


UPD:
Остановился на единственном кросс-браузерном варианте - использование js/jQuery, при активации/потере фокуса - вешаем/убираем класс focus элементу.

$('.label').focusin(function () {
    $(this).addClass('focus');
}).focusout(function () {
    $(this).removeClass('focus');
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы