How to change font-color for disabled input?

Question

I need to change the style for a disabled input element in CSS.

<input type="text" class="details-dialog" disabled="disabled" />

How I can do this for Internet Explorer?

Sidenote: The correct syntax for the disabled attribute is `disabled="disabled"` — NGLN, May 31 '11 at 12:05
@NGLN only if you are using XML serialization of HTML5 or XHTML. — Kevin Peno, Nov 10 '11 at 01:24
@NGLN Kevin is correct, there was no problem with the original HTML. The mere presence of a boolean attribute represents that the value is `true`—see also [attribute minimisation in HTML 4.01](http://www.w3.org/TR/html401/intro/sgmltut.html#h-3.3.4.2) and [boolean attributes in HTML5](http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#boolean-attributes). — Jordan Gray, Jun 18 '13 at 15:22

score 51 · Answer 1 · answered May 31 '11 at 11:42

51

You can:

input[type="text"][disabled] {
   color: red;
}

answered May 31 '11 at 11:42

Alex K.

171,639
30
264
288

6

+1 for the correct answer. (however, it should be noted that this isn't supported in IE6. I recommend not supporting IE6, but if you do need to support it, then you'll need to do it with dynamic classes instead, as per @max's answer) – Spudley May 31 '11 at 11:46
1

@thirtydot while you are correct that the answer is incorrect, I'd argue that this is the way it should be done for forward compatibility. It isn't just IE that has issues with form controls. Form controls are bastardized by all UAs in some way, shape or form. – Kevin Peno Nov 10 '11 at 01:27
6

@Spudley you can't say that it is correct if it doesn't work in IE and the OP asks "How i can do it for IE?" – row1 May 10 '12 at 08:26
@row1 - the user didn't specify *which* version of IE. IE6 is old enough and losing support enough that it's unlikely the user meant IE6 if he didn't specify it explicitly. – Spudley May 10 '12 at 12:31
3

@Spudley it doesn't work in any version of IE (not 100% sure about 9). – row1 May 11 '12 at 03:29
1

Confirmed, doesn't work in any version of ie, don't waste your time on this implementation. – Ally Sep 28 '12 at 08:42
Works for me in IE 11.0.9600 for everything except select/drop down lists. Which I know may not be what OP asked, but posted for consistency's sake. I reported the bug to MS. – Oppa Gingham Style Apr 10 '15 at 22:14
serious programmer don't support IE – stackdave Dec 09 '17 at 04:56

score 50 · Accepted Answer · edited May 23 '17 at 11:46

50

You can't for Internet Explorer.

See this comment I wrote on a related topic:

There doesn't seem to be a good way, see: How to change color of disabled html controls in IE8 using css - you can set the input to readonly instead, but that has other consequences (such as with readonly, the input will be sent to the server on submit, but with disabled, it won't be): http://jsfiddle.net/wCFBw/40

Also, see: Changing font colour in Textboxes in IE which are disabled

edited May 23 '17 at 11:46

Community

1
1

answered May 31 '11 at 11:54

thirtydot

224,678
48
389
349

5

Yet another reason IE SUCKS!! – FastTrack Jan 09 '15 at 15:27
Look at @Charles answer below it is a good workaround and should be the chosen as the "correct" answer in my opinion – Garrett Simpson Feb 12 '16 at 20:24
The only thing with readonly is that it still has the effects of an option ie: hover and selected – yardpenalty.com Apr 10 '16 at 04:51

score 19 · Answer 3 · answered Aug 17 '11 at 04:19

19

The following gets you pretty close in IE8 and works in other browsers too.

In your html:

<input type="text" 
       readonly="readonly"    <!-- disallow editting -->
       onfocus="this.blur();" <!-- prevent focus -->
       tabindex="-1"          <!-- disallow tabbing -->
       class="disabledInput"  <!-- change the color with CSS -->
       />

In your CSS:

.disabledInput {
    color: black;
}

In IE8, there is a slight amount of border color change on hover. Some CSS for input.disabledInput:hover could probably take care of this.

answered Aug 17 '11 at 04:19

Charles

209
2
5

You should avoid using inline events to perform this kind of UI changes. The best approach is like suggested by @alex-k. – Rui Marques May 23 '13 at 16:03
5

@ruionwriting Except Alex K's solution doesn't work in IE7-9. People who upvoted it obviously didn't test it or care about IE. – BadHorsie Sep 11 '13 at 10:25
Best answer!! Worked for me in Chrome and IE 7-9. Thanks! – Gurminder Singh Mar 26 '15 at 08:31

score 8 · Answer 4 · edited Aug 01 '12 at 18:33

8

Replace disabled with readonly="readonly". I think it is the same function.

<input type="text" class="details-dialog" readonly="readonly" style="color: ur color;">

edited Aug 01 '12 at 18:33

Nikola K.

7,093
13
31
39

answered Sep 13 '11 at 01:47

irfan tri atmojo

113
1
1

5

Readonly is not the same. Readonly values with be sent to the server , you will need to add tabindex="-1" to stop tabbing, possibly more side effects. – row1 May 10 '12 at 08:24

score 7 · Answer 5 · answered Jul 12 '12 at 14:41

7

input[disabled], input[disabled]:hover { background-color:#444; }

answered Jul 12 '12 at 14:41

khan

79
1
1

+1 Works for me on IE10. Not sure about other browsers. Can't change the text color using the color style though. – Andez Aug 16 '13 at 09:25
Working fine for me, verified with Chrome and IE all version from 8 to 11. – Ravi Shankar Feb 16 '16 at 10:19

score 3 · Answer 6 · answered Apr 06 '19 at 07:19

You can use readonly instead. Following would do the trick for you.

<input type="text" class="details-dialog" style="background-color: #bbbbbb" readonly>

But you need to note the following. Depends on your business requirement, you can use it.

A readonly element is just not editable, but gets sent when the according form submits. A disabled element isn't editable and isn't sent on submit.

Arash · Answer 7 · 2012-11-13T07:15:57.943

It seems nobody found a solution for this. I don't have one based on only css neither but by using this JavaScript trick I usually can handle disabled input fields.

Remember that disabled fields always follow the style that they got before becoming disabled. So the trick would be 1- Enabling them 2-Change the class 3- Disable them again. Since this happens very fast user cannot understand what happened.

A simple JavaScript code would be something like:

function changeDisabledClass (id, disabledClass){
var myInput=document.getElementById(id);
myInput.disabled=false;             //First make sure it is not disabled
myInput.className=disabledClass;    //change the class
myInput.disabled=true;             //Re-disable it
}

My gut reaction was to do the same thing. The problem is there's no way to change the text color. It will always be the same gray. — MiniRagnarok, Mar 22 '13 at 14:48

score 2 · Answer 8 · edited Sep 03 '21 at 00:12

2

You can simply apply CSS to disabled input

input:disabled {
  color: black;
}

edited Sep 03 '21 at 00:12

kyun

9,710
9
31
66

answered Sep 02 '21 at 10:47

vipul suryavanshi

106
1
4

score 1 · Answer 9 · answered Mar 04 '13 at 19:12

1

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.

answered Mar 04 '13 at 19:12

Homa

3,417
2
19
24

It is considered as legacy https://msdn.microsoft.com/en-us/library/hh801966(v=vs.85).aspx – Disappointed Oct 12 '15 at 12:57
The 'problem' with substituting MS's `unselectable=on` for `disabled` is that this does exactly what it says on the tin! So for example an inputfield's content can *no longer be selected **BUT the user can still use backspace-key and type***.. Thus changing the value from within plain UI, thus defeating a purpose of disabling an input (the other purpose being to exclude disabled elements from a form's post/get request, but then, one can never trust any user-input on the serverside anyway). – GitaarLAB Nov 14 '17 at 05:20

score 1 · Answer 10 · answered Oct 10 '15 at 15:19

1

You could use the following style with opacity

input[disabled="disabled"], select[disabled="disabled"], textarea[disabled="disabled"] {
    opacity: 0.85 !important;
}

or a specific CSS class

.ui-state-disabled{
    opacity: 0.85 !important;
}

answered Oct 10 '15 at 15:19

Cristian Florescu

1,660
20
24

score 1 · Answer 11 · edited Jun 26 '19 at 10:18

This works for making disabled select options act as headers. It doesnt remove the default text shadow of the :disabled option but it does remove the hover effect. In IE you wont get the font color but at least the text-shadow is gone. Here is the html and css:

select option.disabled:disabled{color: #5C3333;background-color: #fff;font-weight: bold;}
select option.disabled:hover{color:  #5C3333 !important;background-color: #fff;}
select option:hover{color: #fde8c4;background-color: #5C3333;}

<select>
     <option class="disabled" disabled>Header1</option>
     <option>Item1</option>
     <option>Item1</option>
     <option>Item1</option>
     <option class="disabled" disabled>Header2</option>
     <option>Item2</option>
     <option>Item2</option>
     <option>Item2</option>
     <option class="disabled" disabled>Header3</option>
     <option>Item3</option>
     <option>Item3</option>
     <option>Item3</option>
</select>

How to change font-color for disabled input?

11 Answers11

Linked