Applying CSS to Text inputs with Classes
-
05-07-2019 - |
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?
Solution
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" */
OTHER TIPS
Try label.error and input.error without spaces.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow