How to change color of disabled html controls in IE8 using css

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?

It wasn't meant to, It's just a good grey color for disabled controls. — Seth Reno, Oct 29 '13 at 18:25
See this comment http://stackoverflow.com/a/5486152/2906042 It helped me) — Aksana Tolstoguzova, May 08 '15 at 11:58

score 125 · Accepted Answer · edited Jan 09 '15 at 03:40

125

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. :-/

edited Jan 09 '15 at 03:40

h4ck3rm1k3

2,060
22
33

answered Sep 11 '09 at 14:40

Wayne Austin

2,979
3
25
30

1

Yea, but why? Is it using some non-standard filter style behind the scenes or something? – Seth Reno Sep 11 '09 at 14:55
68

I almost voted this answer down, but I stopped myself. I was going to do it because I hated the answer; not because the answer was wrong. Voting up :p – Stephen Sorensen Oct 02 '09 at 16:39
I think this falls under the same category as the "Friendly Error Pages", M$ is just trying to help – guzart Aug 09 '12 at 21:34
2

Though this answer is 'correct', I think it would be useful to wiki-ize it and link to other SO questions that are useful at documenting what options are available to make the situation suck less. e.g. Forcing background color to white to make things more readable, using JS to change to read-only + force blur onFocus, JS to display a div instead of an input – Snekse Sep 09 '13 at 16:24
been 4 years now, any improvement been made ? – Venzentx Nov 12 '13 at 16:41

robocat · Answer 2 · 2014-12-16T00:55:46.737

I had the same problem for <select> elements in IE10 and found a solution that works for select elements only:

http://jsbin.com/ujapog/7/

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.

I've tried on IE10 and IE11 and it works. Pay attention on disabled attribute. You can define it on different way. It could be `disabled`, `disabled=""`, `disabled="true"`, `disabled="disabled"`. Unfortunately it doesn't work in IE9. — Marek, Dec 08 '14 at 17:51

Hamid Tavakoli · Answer 3 · 2014-09-16T16:46:17.200

8

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/

edited Sep 16 '14 at 16:46

answered Nov 12 '12 at 16:16

Hamid Tavakoli

4,567
1
33
34

Lihkinisak · Answer 4 · 2013-05-28T16:00:09.303

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.

edited May 28 '13 at 16:00

answered May 25 '13 at 01:25

Lihkinisak

749
2
7
14

The best solution for me. Simple and efficient. – Gaston Dec 13 '17 at 14:01

score 3 · Answer 5 · answered Jan 25 '13 at 16:57

3

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()})

answered Jan 25 '13 at 16:57

Cold Hiller

39
2

That solution has the nasty usability side-effect of preventing the user being able to tab through a checkbox to the next control - yuck. Especially since you have made it break usability cross-browser. – robocat Dec 16 '14 at 01:00

score 2 · Answer 6 · answered Nov 07 '12 at 19:20

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;     
}

answered Nov 07 '12 at 19:20

viggity

15,039
7
88
96

1

Any idea on why this is being downvoted? It works in the latest version of IE, FF and Chrome... – Wouter Mar 14 '13 at 13:35
3

Was the question not IE8 before? – fncomp May 25 '13 at 02:18

score 1 · Answer 7 · answered Aug 09 '12 at 21:35

1

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.

answered Aug 09 '12 at 21:35

guzart

3,700
28
23

score 1 · Answer 8 · answered Aug 03 '10 at 15:35

1

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;'

answered Aug 03 '10 at 15:35

Booji Boy

4,522
4
40
45

3

I think `onclick='return false;'` does the same thing but simpler – philfreo May 12 '11 at 18:48

Homa · Answer 9 · 2013-03-04T19:10:58.820

0

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.

edited Mar 04 '13 at 19:10

answered Mar 04 '13 at 19:05

Homa

3,417
2
19
24

score 0 · Answer 10 · answered Apr 08 '13 at 13:02

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>

score 0 · Answer 11 · answered Sep 03 '13 at 08:08

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;
}

score 0 · Answer 12 · answered Sep 26 '13 at 09:44

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/

score 0 · Answer 13 · answered Nov 13 '13 at 10:21

0

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;     
 }

answered Nov 13 '13 at 10:21

Sahana

577
8
11

The `readonly` attribute ignored if the value of the `type` attribute is `hidden`, `range`, `color`, `checkbox`, `radio`, `file` or `button` so it might not work as expected on all inputs – Frinsh Jan 12 '15 at 10:22

score 0 · Answer 14 · answered Feb 14 '14 at 08:10

0

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/

answered Feb 14 '14 at 08:10

Kheema Pandey

9,977
4
25
26

score 0 · Answer 15 · answered Jul 31 '18 at 16:59

0

The problem is solved in IE11. If the problem still persists in IE11, check for the rendering engine IE is using.

answered Jul 31 '18 at 16:59

Aman Srivastava

109
1
4

score -2 · Answer 16 · edited May 23 '17 at 12:19

-2

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 Applying k-state-disabled class to text inputs - Kendo UI Thought I should share!

edited May 23 '17 at 12:19

Community

1
1

answered Oct 13 '15 at 13:57

HereToLearn_

1,150
4
26
47

You should comment whether or not this is Kendo specific. Not very helpful in its current composition – yardpenalty.com Apr 09 '16 at 06:20

score -2 · Answer 17 · edited Apr 18 '16 at 06:50

-2

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
}

edited Apr 18 '16 at 06:50

Thomas Bormans

5,156
6
34
51

answered Apr 18 '16 at 05:14

Vikram Rao

29
4

How to change color of disabled html controls in IE8 using css

17 Answers17

Linked