Question

I have a comment form and I set the opacity for that form to 0.7

Now I want to change the opacity to 1 only when the users are filling out that form. How can I do that?

I tried using :focus selector on the form id but it doesn’t seem to work at all.

#comment_form
{
    opacity: 0.7;
}

#comment_form:focus
{
    opacity: 1;
}

Or perhaps there are other ways to achieve this that would be a better solution? (Like maybe using Javascript?)

Answer 1

You are trying to change the opacity of the form when an input inside that form is focused.

You can’t select elements in CSS based on what descendants they have, so this requires JavaScript.

For example, an (untested) YUI 3 approach would be:

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

And then:

#comment_form.focused
{
    opacity: 1;
}

You would need similar code for the blur event, and I would recommend adding a class to make it translucent using JS so that it is always fully opaque if JS is not available.