Ok so I have a form which uses the following css to colour the border:

input[type="text"] {
    border: 1px solid #ccc;
}

The problem I have is changing the border colour using another css class. If I use the following I can change the border $("#div").css("border", "1px solid green");, but if i try to add another class to it via $("#div").addClass("good"); it doesnt change the border. What the correct way to change the border colour using a css class ?

Thanks,

Ok so I have a form which uses the following css to colour the border:

input[type="text"] {
    border: 1px solid #ccc;
}

The problem I have is changing the border colour using another css class. If I use the following I can change the border $("#div").css("border", "1px solid green");, but if i try to add another class to it via $("#div").addClass("good"); it doesnt change the border. What the correct way to change the border colour using a css class ?

Thanks,

• javascript
• jquery
• html
• css

• Have you tried setting its CSS to '' before adding the other class? – Alex W Commented Jul 8, 2012 at 16:25
• 1 What rules exactly does the good class contain? – Pekka Commented Jul 8, 2012 at 16:26
• How is your "good" class implemented? – davids Commented Jul 8, 2012 at 16:26

5 Answers 5

You should use an override to enforce that the style is applied:

.good { border-color: green !important; }

or

.good { border: 1px solid green !important; }

DEMO

This one should boil down to specificity in css. Some things that will help make sure your border changes:

1. Make sure .good {} is lower on your style sheet than the base css for form elements

2. Try adding a descendant selector to your css .good class for that tag type:

   .good input[type=text]{ border: 1px solid green; }

3. If all else fails, add !important to your .good class

I'd keep the styles in the css, like so:

.default {
    border: 1px solid #ccc;
}

.green {
    border: 1px solid green;
}

.red {
    border: 1px solid red;
}

.blue {
    border: 1px solid blue;
}​

Then with jquery, I'd remove the current class, and add the new desired one.

$('input[type="text"]').attr('class', '').addClass(colors[i]);

Take a look at this fiddle: http://jsfiddle/joplomacedo/YnnE3/

I suppose u have styled like this below..

input[type="text"]{
                    border: 1px solid #ccc;
                   } 
.good{
       border:1px solid red; 
     }

And your HTML as these..

<input type="text" id="div"/>

Now to change the border color of your input element with jquery u have to just do these..

$('#div').addClass('good');

Now if u want to change the border color of your input element again, just do these..

$('#div').removeClass('good').addClass('green');

@Brian Vanderbusch has the closest answer on this one. This is a CSS specificity problem.

The bined tag/attribute selector (input[type="text"]) is overriding the single class selector (.good). CSS has a bunch of rules that it uses to decide which selectors take precedence.

Although using the !important modifier is one way to override CSS specificity rules, I'd be careful about using it, as you're effectively breaking the normal rules on purpose. This can have unexpected side-effects, and can be difficult for other developers to understand later.

In this case, to grant the proper level of specificity to your class selector, you just need to bine it with the input selector. This gives it enough weight to override the tag/attribute selector.

I forked @Joey's answer to demonstrate how I would do this using standard selectors, and avoiding !important:

http://jsfiddle/5jX5d/