CODEWITHSUNDEEP
javascripthtmlcsscss-selectors
Fad
Fad

Reputation: 9858

Change Form Styling When It's Focused

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?)

Upvotes: 1

Views: 93

Answers (2)

Jonas G. Drange
Jonas G. Drange

Reputation: 8845

:focus does not work so well in IE 5-8.

Anyway, the :focus pseudo class should be on the individual input elements, like textarea, input and so on, not the whole form.

Edit: For a rudimentary solution to this, see this fiddle.

Upvotes: 1

Quentin
Quentin

Reputation: 944546

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.

Upvotes: 3

Related Questions