Изменить стиль формы, когда он сфокусирован

Question

У меня есть форма комментария, и я установил opacity для этой формы на 0.7

Теперь я хочу изменить opacity на 1 только тогда, когда пользователи заполняют эту форму. Как я могу это сделать?

Я пытался использовать :focus селектор в идентификаторе формы, но, похоже, он не работает вообще.

#comment_form
{
    opacity: 0.7;
}

#comment_form:focus
{
    opacity: 1;
}

Или, возможно, есть другие способы достижения этого, которые были бы лучшим решением? (Как, может быть, с использованием Javascript?)

Answer 1

Вы пытаетесь изменить непрозрачность формы , когда ввод внутри этой формы сфокусирован.

Вы не можете выбирать элементы в CSS на основекакие потомки у них есть, так что для этого требуется JavaScript.

Например, (непроверенный) подход YUI 3 будет:

var form = Y.one('#comment_form');
form.delegate('focus', function (e) { 
    form.addClass('focused');
}, 'input');

А затем:

#comment_form.focused
{
    opacity: 1;
}

Вам потребуется подобный код для события размытия, и я бы порекомендовал добавить класс, чтобы сделать его полупрозрачным с помощью JS, чтобы он всегда был полностью непрозрачным, если JS недоступен.

Answer 2

: фокус не работает так хорошо в IE 5-8 .

В любом случае, псевдокласс: focus должен быть для отдельных элементов ввода, таких как textarea, input и т. Д., А не для всей формы.

Редактировать: для элементарного решения этого см. эту скрипку .