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?

Goodsell

Sidenote: The correct syntax for the disabled attribute is disabled="disabled" – Rounds

@Rounds only if you are using XML serialization of HTML5 or XHTML. – Pontine

@Rounds 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 and boolean attributes in HTML5. – Interoffice

Answer 1

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

Immense

Yet another reason IE SUCKS!! – Giga

Look at @Charles answer below it is a good workaround and should be the chosen as the "correct" answer in my opinion – Crinose

The only thing with readonly is that it still has the effects of an option ie: hover and selected – Roz

Answer 2

You can:

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

Hakon

+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) – Money

@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. – Pontine

@Money 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?" – Lymphocyte

@Lymphocyte - 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. – Money

@Money it doesn't work in any version of IE (not 100% sure about 9). – Lymphocyte

Confirmed, doesn't work in any version of ie, don't waste your time on this implementation. – Codycoe

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. – Cesspool

serious programmer don't support IE – Fraktur

Answer 3

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.

Bias

You should avoid using inline events to perform this kind of UI changes. The best approach is like suggested by @alex-k. – Malleolus

@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. – Kreg

Best answer!! Worked for me in Chrome and IE 7-9. Thanks! – Marylouisemaryly

Answer 4

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

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

Lobeline

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. – Lymphocyte

Answer 5

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

Incomprehensive

+1 Works for me on IE10. Not sure about other browsers. Can't change the text color using the color style though. – Pneumonic

Working fine for me, verified with Chrome and IE all version from 8 to 11. – Inspector

Answer 6

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.

Wrestling

Answer 7

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
}

Rampant

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. – Budd

Answer 8

You can simply apply CSS to disabled input

input:disabled {
  color: black;
}

Halla

Answer 9

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.

Hegemony

It is considered as legacy msdn.microsoft.com/en-us/library/hh801966(v=vs.85).aspx – Titlark

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). – Surcingle

Answer 10

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

Schlegel

Answer 11

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>

Roz