Adding class doesn't change style

Question

I have CSS for a submit button (shortened for ease of reading):

input[type="submit"] 
{
background-color:#3bb3e0;
padding:10px;
position:relative;
font-family: Arial, sans-serif;
font-size:12px;
text-decoration:none;
color:#fff;
border: solid 1px #186f8f;
border-radius: 5px;
cursor:pointer;
}

When a user if filling out a form, whilst error checking using ajax I want to disable the submit button and change its color if the user enters something wrong, so I use the following jquery:

if(response == 0)
{
$("#button").addClass("buttonDisable");
$('#cross').fadeIn();
$('#button').prop('disabled', true);
}

The button disables ok but the CSS has no effect as the inspector shows it added after the initial css therefore it is crossed out:

input[type="submit"].buttonDisable { background-color:#ccc; border:1px solid #666; }

QUESTION: How can I make the class have an effect on the button?

This would be such a hilarious question title on fashion.stackexchange.com if it existed :) — Pekka
– Pekka, Commented May 12, 2013 at 7:51
@PalashMondal Definitely not working when used as above, reading the result of an ajax call - The inspector shows the class is added but it doesn't change it's style — StudioTime
– StudioTime, Commented May 12, 2013 at 8:02
The other way round it would be even funnier: Changing style doesn't add class — Pekka
– Pekka, Commented May 12, 2013 at 8:08

PSL · Accepted Answer · 2013-05-12 08:03:00Z

2

Try this:-

input[type="submit"][disabled] { background-color:#ccc; border:1px solid #666; }

answered May 12, 2013 at 8:03

PSL

124k21 gold badges257 silver badges243 bronze badges

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

Collectives™ on Stack Overflow

Adding class doesn't change style

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related