Как поймать фокус родительского по отношению к input элемента c помощью CSS или скриптов? — Хабр Q&A
Приветствую.
Пробую скопировать с одного сайта оформление формы.
Скопировал оформление поля для ввода (input).
Какой получился код — см. ниже. (лишнее из кода удалил).
<div>
<div>
<label for="XXX">Контактное лицо</label>
</div>
<div>
<span>
<span>
<span unselectable="on"> </span>
<input name="XXX">
</span>
</span>
</div>
</div> Поле для ввода выглядит как нужно.
На сайте оригинале при наведении на подобное поле, оно подсвечивается цветной рамкой.
Я тоже хочу сделать подсветку выбранного поля, но пока у меня это не получается.
В оригинале за подсветку поля в CSS отвечает такая конструкция:
.input_theme1.input_focused_yes .input__box:before { border: 2px solid #ff0e1a }
input__box:before {
border: 2px solid #ff0e1a
}В этой конструкии важно то, что класс .input_focused_yes подставляется скриптом при нажатии на поле. Я хотел все тоже самое реализовать без скрпитов, но не получается поймать фокус этого поля. Скрипт на сайте оригинале скопировать просто не получится.
Для примера в оригинале обработка наведения hover и нажатия active тоже реализована с помощью скрипртов. Наведенному элементу, например, кнопке добавляется класс hovered_yes. Наведение для поля и кнопки у меня легко получилось сделать без скриптов
для этого оригинальную конструкцию.button_theme1.button_hovered_yes:before,
я заменил на .button_theme1:hover:before {
Если с тем, чтобы поймать наведение на поле проблем не возникло, то поймать фокус у меня не получается.
Оригинальную конструкцию
.input_theme1.input_focused_yes .input__box:before { }меняю на .
input_theme1:focus .input__box:before { }
… и не работает. Делаю поле input мышкой активным, правило CSS не стабатывает. Если я принудительно в браузере в разделе для разработчика включу нужному элементу псевдокласс :focus, то поле подсвечивается. Т.е. стили все готовы для корректной работы, остается только фокус поймать.
Почему не ловится фокус, я не знаю. Возможно проблема в том, что фокус должен возникнуть у элемента SPAN (.input_theme1), а этот элемент, вероятно, не имеет в принципе фокуса. Пробовал фокус по разному пробовать поймать у разных элементов — не выходит ничего. Верстку менять не вариант. Я привел упрощенный код, а на самом деле в CSS куча классов, с каждым разбираться не хотелось бы.
Я готов отказаться от использования чистого CSS и использовать jquery. Но в скриптах я почти не разбираюсь.
Каким образом по нажатию на поле, с помощью скриптов добавлять одному из родительских элементов (SPAN) класс .input_focused_yes? И при потере фокуса этот класс убирать.
Или можно это сделать без скриптов на CSS отрабатывая как-то псевдокласс :focus?
html — генерация содержимого CSS до или после «входных» элементов
спросил
Изменено 3 года, 1 месяц назад
Просмотрено 269 тысяч раз
В Firefox 3 и Google Chrome 8.0 следующее работает должным образом: