Raphael Mutiso Raphael Mutiso - 4 months ago 59
CSS Question

CSS for asp.net disabled button

I have an asp.net button which is disabled based on some c# code conditions. The button, call it btnPrevious is set to use the following css class:

.btnBlue{
background: rgb(40, 108, 244); /* Old browsers */
background:linear-gradient(to bottom, rgb(40, 108, 244) 0%, rgb(0, 68, 204) 50%, rgb(40, 108, 244) 100%) repeat scroll 0% 0% transparent; /* W3C */
background: -moz-linear-gradient(top, rgb(40, 108, 244) 0%, rgb(0, 68, 204) 50%, rgb(40, 108, 244) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(40, 108, 244)), color-stop(50%,rgb(0, 68, 204)), color-stop(100%,rgb(40, 108, 244))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(40, 108, 244) 0%,rgb(0, 68, 204) 50%,rgb(40, 108, 244) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(40, 108, 244) 0%,rgb(0, 68, 204) 50%,rgb(40, 108, 244) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(40, 108, 244) 0%,rgb(0, 68, 204) 50%,rgb(40, 108, 244) 100%); /* IE10+ */
-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=rgb(40, 108, 244), endColorstr=rgb(40, 108, 244),GradientType=0 ); /* IE6-9 */}


When the button is in disabled state i.e. btnPrevious.disabled=true; the css property does not work.
Where am i going wrong. Thanks.

EDIT: Just making the question a bit more on-topic:

Why or how is my CSS overwritten by the default framework?

Answer

Sounds like a case of Specificity. Serveral rules can apply to the same element(s). Your rule is not very specific and will get applied early (and thus easily overwritten).

Open the webpage in a good browser (I use Chrome) and then open the development tab (F12). Inspect the button and view the Styles tab. You should be able to see where the unwanted styling comes from (it will show you the file and the selector/rule for applying the unwanted style).

If you do not want to (or can) track down (and remove) the style responsible for messing up the disable state, you can try and make your rule more important. Check the link for Specificity but a hint would be to either try and make your rule more specific by targeting the button (not just the class) and perhaps a container like this:

#container button.btnBlue  {
  ...
}

You could also opt for using the rebel flag !important to put your rule ahead of other rules that are not also using the !important flag like this:

#container button.btnBlue  {
  background: rgb(40, 108, 244) !important; 
  ...
}

In general - as explained in the link - you should try not to use !important since it kinda breaks the beauty of CSS. Unless the asp.net button also uses !important (or inline style attribute), it should be very easy to make a more specific rule than the asp.net rule, since only YOU know where your buttons are in the document. You would always be able to make your rule a little more specific than the asp.net rule.

I don't know how the unwanted style is being applied - I just hope it's not an inline (style attribute) with the !important flag ;)