Applying CSS to Text inputs with Classes

Question

I'm using jQuery validate on a form I am building and it is working great. What I want to do is when something is invalid to have the text field change colors and the error message to be white. I figured the following CSS would work:

label .error {color: white; font-weight: bold;}
input .error {background-color: pink; border: 1px dashed red; color: white}

When I test the validation the above CSS doesn't seem to apply. I checked using Firebug and the label and input area have the 'error' class applied.

The CSS seems valid as when I leave off the .error clause everything looks like I want it too. What am I doing wrong?

Tomalak · Accepted Answer · 2008-10-29 15:52:52Z

13

One space can be one too much. Try:

label.error {color: white; font-weight: bold;}
input.error {background-color: pink; border: 1px dashed red; color: white}

Background info:

label .error  /* selects all elements of class "error" *within* any label */
label.error   /* selects labels of class "error"                          */

answered Oct 29, 2008 at 15:52

Tomalak

340k68 gold badges547 silver badges635 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John Dunagan Over a year ago

Bang. Nailed it. Nice catch, Tomalak!

Dave · Accepted Answer · 2008-10-29 15:52:41Z

3

Try label.error and input.error without spaces.

answered Oct 29, 2008 at 15:52

Dave

1552 silver badges5 bronze badges

Collectives™ on Stack Overflow

Applying CSS to Text inputs with Classes

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related