I have a button that is pre-styled so the disabled color doesn't look disabled when the button is disabled. I can't take off the prestyling so what I want to do is say something like:

if button is disabled, show this color, else return this color.

The code below shows a button that is disabled for 30 seconds on page load.

<script type="text/javascript" >
  window.onload = function()
      {
         var btn = document.getElementsByName('submit')[0];
         btn.disabled  = true;

         setTimeout(function(){btn.disabled  = false;}, 30000);

      };

I have a button that is pre-styled so the disabled color doesn't look disabled when the button is disabled. I can't take off the prestyling so what I want to do is say something like:

if button is disabled, show this color, else return this color.

The code below shows a button that is disabled for 30 seconds on page load.

<script type="text/javascript" >
  window.onload = function()
      {
         var btn = document.getElementsByName('submit')[0];
         btn.disabled  = true;

         setTimeout(function(){btn.disabled  = false;}, 30000);

      };

• javascript
• button

3 Answers 3

You can simply do it using CSS3 :disabled Selector

input[type="submit"]:disabled
{
    background:#CCC;
}

You can use addClass :

<script type="text/javascript" >
  window.onload = function()
      {
         var btn = document.getElementsByName('submit')[0];
         btn.disabled  = true;
         btn.setAttribute("class", "your_class");
         setTimeout(function(){btn.disabled  = false;}, 30000);

      };

Have you tried this?

input[disabled='disabled']{
    //different style
}