My input submit button has 3 different states:
- Active : Orange button
- Mouse down : Dark gray button
Disabled : Light gray button
<input type="submit" id="savebtn" class="save_button"/>
CSS:
.save_button {
background: url('/Images/save_button_active.png') no-repeat scroll 0 0 transparent;
cursor: pointer;
font-weight: bold;
font-size: 14px;
height: 33px;
padding-bottom: 4px;
padding-right: 19px;
width: 216px;
border: solid 0px;
color: #fff!important;
background-position: 0px -30px;
}
.save_button-active {
background:url('/Images/save_button_mousedown.png') no-repeat scroll 0 0 transparent;
cursor: pointer;
font-size:14px;
font-weight: bold;
height: 33px;
padding-bottom: 4px;
padding-right: 19px;
width: 216px;
border:solid 0px;
color:#fff!important;
background-position:0px 2px;
margin-right:20px\0;
}
.save_button[type="submit"]:disabled, .save_button[type="submit"][disabled] {
background:url('/Images/save_button_disabled.png') no-repeat scroll 0 0 transparent;
cursor: pointer;
font-size:14px;
font-weight: bold;
height: 32px;
padding-bottom: 4px;
padding-right: 19px;
width: 216px;
border:solid 0px;
color:#fff!important;
background-position:0px 1px;
margin-right:20px\0;
}
All works fine in Chrome and other IE versions, except for IE8 where the disabled state turns orange with gray text.
I dynamically add active classes using jQuery.
fnMouseDownEvents(buttonObj, mousedownClass, mouseupClass);
The function is called like this:
fnMouseDownEvents('save_button', 'save_button-active', 'save_button')
I have tried various solutions found on StackOverflow, but none have worked. Is there something I am overlooking here?