How to change color of disabled html controls in IE8 using css
HtmlCssInternet ExplorerHtml Problem Overview
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?
Html Solutions
Solution 1 - Html
Unfortunately if you use the disabled attribute, no matter what you try IE will just default the color of the text to Grey, with a weird white shadow...thing... yet all other styles will still work. :-/
Solution 2 - Html
I had the same problem for <select>
elements in IE10 and found a solution that works for select elements only:
There is a Microsoft pseudo-element that allows the text color to be modified:
select[disabled='disabled']::-ms-value {
color: #000;
}
The rule must be on it's own, because otherwise other browsers will ignore the whole rule due to syntax error. See http://msdn.microsoft.com/en-us/library/ie/hh869604(v=vs.85).aspx for other Internet Explorer only pseudo elements.
Edit: I think the rule should probably be select[disabled]::-ms-value
but I don't have older IE versions in front of me to try it - re-edit this paragraph or add comment if that is an improvement.
Solution 3 - Html
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/
Solution 4 - Html
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.
Solution 5 - Html
I Know it's been a while since the creation of this topic, but i created this workaround, and well... It worked for me! ( Using IE 9 )
The only consequence is that you can't select the value of the input.
Using Javascript:
if (input.addEventListener)
input.addEventListener('focus', function(){input.blur()}, true)
if (input.attachEvent)
input.attachEvent("onfocus", function(){input.blur()})
Solution 6 - Html
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;
}
Solution 7 - Html
The way I solved the problem of "disabling" a control in IE w/o the ugly gray with a input control of type = checkbox was to leave it enabled and use a little javascript in the onclick event to prevent changes:
onclick='this.checked == true ? this.checked = false : this.checked = true;'
Solution 8 - Html
As mentioned by Wayne, and three years later still no luck w/ IE9, but...
You could try lowering the opacity
using CSS, it makes it more readable and helps with the whole disabled state.
Solution 9 - Html
It is the solution that I found for this problem:
//if IE
inputElement.writeAttribute("unselectable", "on");
//Other browsers
inputElement.writeAttribute("disabled", "disabled");
By using this trick, you can add style sheet to your input element that works in IE and other browsers on your not-editable input box.
Solution 10 - Html
I mixed user1733926's and Hamid's solutions and I found an effective code for IE8, would be nice to know if it works in ie 9/10 as well (?).
<script type="text/javascript">
if ($.browser.msie) {
$("*[disabled='disabled']").each(function() {
$(this).removeAttr("disabled");
$(this).attr("unselectable", "on");
});
}
</script>
Solution 11 - Html
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;
}
Solution 12 - Html
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/
Solution 13 - Html
Remove disabled attribute and use readonly attribute. Write required CSS for achieving the required result. This works in IE8 and IE9.
for e.g., for dark grey,
input[readonly]{
color: #333333;
}
Solution 14 - Html
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/
Solution 15 - Html
The problem is solved in IE11. If the problem still persists in IE11, check for the rendering engine IE is using.
Solution 16 - Html
I came across this piece of code at stackoverflow which helped me take off disable css class using javascript.
$("#textboxtest").prop("disabled", false).removeClass("k-state-disabled");
Original thread can be found at https://stackoverflow.com/questions/20491191/applying-k-state-disabled-class-to-text-inputs-kendo-ui Thought I should share!
Solution 17 - Html
Use this css, works for IE11:
input[disabled="disabled"], select[disabled="disabled"], textarea[disabled="disabled"] {
opacity:0.99 !important;
background:black;
text-shadow:inherit;
background-color:white;
color:black
}