How to change color of disabled html controls in I

Question

I'm trying to change the color of input controls when they are disabled using the following css.

input[disabled='disabled']{
  color: #666;     
}

This works in most browsers, but not IE. I'm able to change any of the other style properties such as background-color, border-color, etc... just not color. Can anyone explain this?

Answer 1

No need to overrride CSS use class based approach and play with events works perfectly

You can do one thing:

<button class="disabled" onmousedown="return checkDisable();">

function checkDisable() {
 if ($(this).hasClass('disabled')) { return false; }
 }

http://navneetnagpal.wordpress.com/2013/09/26/ie-button-text-shadow-issue-in-case-of-disabled/

Answer 2

I just made the whole background a light gray color, I think it more easily/quickly convey's that the box is disabled.

input[disabled]{
  background: #D4D4D4;     
}

Answer 3

After reading this post I decided to create a input that acts similarly to a disabled input box but was "readonly".

So I've made it so it wasn't able to be selected or tabbed to, or have a mouse cursor that gave the user the idea they can change or select the value.

Tested on IE8/9, Mozzila 18, Chrome 29

<input name="UserName" class="accountInputDisabled" id="UserName" type="text" readOnly="readonly" value="" unselectable="on" tabindex="-1" onselectstart="return false;" ondragstart="return false;" onmousedown='return false;'/>


input.accountInputDisabled {
    border: 1px solid #BABABA !important;
    background-color: #E5E5E5 !important;    
    color: #000000;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -moz-user-input: disabled;
    -ms-user-select: none;
    cursor:not-allowed;
}

input:focus {
    outline: none;
}          

Answer 4

I had the same problem with textarea "disabled" changing font color to gray. I did a workaround by using "readonly" attribute instead of "disabled" attribute to textarea with below css

textarea[readonly] {
border:none; //for optional look
background-color:#000000; //Desired Background color        
color:#ffffff;// Desired text color
}

It worked for me like a charm!!, so I suggest to try this first before any other solution as it is easy to replace "disabled" with "readonly" without changing any other parts of code.

Answer 5

There is no way to override styles for disable="disable" attribute. Here is my work around to fix this problem, note I am only selecting submit buttons in my case:

if ($.browser.msie) {
    $("input[type='submit'][disabled='disabled']").each(function() {
        $(this).removeAttr("disabled");
        $(this).attr("onclick", "javascript:return false;");
    });
}

example available: http://jsfiddle.net/0dr3jyLp/

Answer 6

Please check this CSS code.

input[type='button']:disabled, button:disabled
 {
    color:#933;
    text-decoration:underline;
}

or check this URL. http://jsfiddle.net/kheema/uK8cL/13/