Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Target label in CSS

Target label in CSS

Problem

Is there a possible way to target the Label for an input in css3? For example I tried this method -

input[type="text"]:focus label:target {
    color:orange !important;
}

Doesn't seem to work, just wondering or is this a job for jquery only?

Thanks!

Problem courtesy of: Matt

Solution

The :target pseudo-class doesn't do what you think it does, and label can never exist as a descendant of input, so that won't work.

If you're trying to refer to a label which is associated with an input either by parentage or the for attribute, that's not possible with CSS3. You can only refer to the label if it's a sibling that follows the input, with either one of these:

input[type="text"]:focus + label
input[type="text"]:focus ~ label

If the label is an ancestor, preceding sibling or completely elsewhere, you'll need to use jQuery to traverse the DOM and locate it.

Solution courtesy of: BoltClock

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Target label in CSS

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×