Как поймать фокус родительского по отношению к input элемента c помощью CSS или скриптов?

Question

[xbox]

Приветствую.
Пробую скопировать с одного сайта оформление формы.
Скопировал оформление поля для ввода (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?

Answer 1

[Андрей Верх]

:focus'a нет у div'ов. Это состояние только для полей ввода.
Нормально код перепишите и не будет проблем. К чему эти каскады и скрипты...

.input_control:focus {}

Comments

[xbox]

Спасибо за комментарий.
Код переписать возможности нет.
Для того, чтобы все выглядело, как нужно, пришлось из оригинального CSS файла с 8000 строками, отобрать сотню-другую, которые относятся к нужным мне элементам. Каждому элементу (span, input) может быть назначено по ~пять классов. Кроме поля input есть и другие элементы. Есть встроенные в поля картинки, крестики итп. Все эти каскады в html на самом деле используется для различных выравниваний. Все заново переписать, наверное, и можно. Но на это уйдет день работы. А если уже все работает, кроме подсветки активного поля, то думаю, легче скрипт написать, которой класс подставит, куда нужно.

[Андрей Верх]

xbox: Ну тогда да, видимо нужно скрипт использовать. Благо это 2строчки на JQ