Приветствую.
Пробую скопировать с одного сайта оформление формы.
Скопировал оформление поля для ввода (input).
Какой получился код - см. ниже. (лишнее из кода удалил).
<div class="XXX_indent">
<div class="XXX_label">
<label class="label2" for="XXX">Контактное лицо</label>
</div>
<div class="XXX_base">
<span class="input_theme1">
<span class="input_box">
<span class="input_clear" unselectable="on"> </span>
<input class="input_control" name="XXX">
</span>
</span>
</div>
</div>
Поле для ввода выглядит как нужно.
На сайте оригинале при наведении на подобное поле, оно подсвечивается цветной рамкой.
Я тоже
хочу сделать подсветку выбранного поля, но пока у меня это не получается.
В оригинале за подсветку поля в CSS отвечает такая конструкция:
.input_theme1.input_focused_yes .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? 
