CSS validation class not applied

Question

I'm doing this to set a border around input fields:

input[type=text], input[type=password], textarea { border: 1px solid #9BAF31;}

I have client-side validation that adds this class when errors occur:

.input-validation-error {
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

But only the background is set. The border is still the original color. How can i set it with the validation color?

your first declaration probably overrides your second. how about border: 1px solid #ff0000 !important ? it would also be better if you provided a sample in jsfiddle to better diagnose this — corroded
– corroded, Commented Mar 7, 2011 at 10:16
!important is a one shot sledgehammer, it is best avoided as it often leads to "I wish there was a double !important method" situations. Get the specificity right instead. — Quentin
– Quentin, Commented Mar 7, 2011 at 10:18

Clyde Lobo · Accepted Answer · 2011-03-07 10:37:35Z

1

Have you tried

input[type=text].input-validation-error ,input[type=password].input-validation-error, textarea.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

answered Mar 7, 2011 at 10:37

Clyde Lobo

9,1747 gold badges37 silver badges63 bronze badges

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

Comments

Quentin · Accepted Answer · 2011-03-07 10:17:28Z

1

You need to make the rule you want to apply at least as specific as the existing rules.

answered Mar 7, 2011 at 10:17

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

2 Comments

raklos Over a year ago

in this case how do i make it at least as specific?

Quentin Over a year ago

Follow the link to see the rules for specificity.

ChrisH · Accepted Answer · 2011-03-07 10:18:06Z

0

You could try to add the .input-validation-error above the "input[type=text],input[type=password], textarea". Also, what does FireBug says when you inspect the element?

answered Mar 7, 2011 at 10:18

ChrisH

1,2811 gold badge9 silver badges22 bronze badges

Collectives™ on Stack Overflow

CSS validation class not applied

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related