Can you style an active form input's label with just CSS

Question

Given the following html

label

         


        

Answer 1

You can use an attribute selector:

label[for=inputelement]:focus,
label[for=inputelement]:active {
    /*styles here*/
}

Note that this isn't supported by IE6, but should work in all other browsers, including IE7 and IE8.

That will obviously only work for that specific ID. If you would like it to work for all IDs, simply leave out the ID:

label[for]:focus,
label[for]:active {
    /*styles here*/
}

This will now work for all labels with a for attribute.

If you need something in between, you'll need to use classes.