Changing font colour in Textboxes in IE which are disabled

Question

I noticed that you can change the colour of text in textboxes which are disabled in Firefox applying a simple class but could not get a way to do it in IE 6/7. Does anyone out there have a elegant solution to achieve this.

Answer 1

I noticed that you can change the colour of text in textboxes which are disabled in Firefox

I think what the question is trying to say is that this:

<textarea disabled="disabled" style="color: red;">Hello</textarea>

Results in grey text in IE, vs. red in Fox. FWIW, Opera also gives grey, whilst the WebKit browsers give red.

This is a pure CSS issue to do with how much form fields are rendered according to the OS's widget set and how much according to the CSS rules. This has always been an area of great cross-browser difference. Scripting is not relevant, much though SO would like “use jQuery” to be the answer to every question.

The usual workaround is to use ‘readonly’ instead of ‘disabled’, then use styling (eg. based off ‘class="disabled"’) to reproduce whatever shaded disabled effect you want. ‘readonly’ controls are not turned into OS-level-disabled widgets, giving you more latitude to style them.

Answer 2

     It should be noted that using the disabled attribute causes the underlying <input> element not to be submitted during a form submit, where as readonly controls are submitted to the server. Thus, you shouldn't use readonly if your server code isn't expecting a value from that control.

     It's been my experience that trying to hack something to get an acceptable presentation usually isn't worth it. I'd suggest you either change your CSS so that the fixed IE disabled text styling doesn't conflict with your underlying control style, or you use styled text in place of the control (since disabled controls aren't successful for submission anyways). Work with the browser and not against it.

Answer 3

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

http://jsbin.com/ujapog/90

There is a Microsoft psuedo-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 psuedo elements.

EDIT: The -ms-value psuedo-element was introduced in IE10 so won't work on earlier versions.

Answer 4

Problem with IE that it cannot apply style for disabled control, that is why firstly we need to remove it from our textboxes, then add our style and disable focusing on control. I've tried also unbind('focus') but it didn't work.

So I used JQUERY for this:

var disabledControls = $("input:disabled, textarea:disabled");
    disabledControls.removeAttr('disabled');
    disabledControls.addClass("is-disabled");
    disabledControls.focus(function() {
    this.blur();
});

CSS class:

.is-disabled {
    background-color: #EBEBEB;
    color: black !important;   
}

Works perfectly in IE8\9 and Chrome...

Answer 5

You can use the following to simulate disabled-field behaviour with these next lines:

// find all disabled fields
$("input:disabled, textarea:disabled, select:disabled").each(function(index){
    // add the class is_disabled
    $(this).addClass("is_disabled");
    // remove the attribut disabled
    $(this).removeAttr('disabled');
    // add new attribut readonly
    $(this).attr('readOnly', 'readOnly');
});
// on submit remove all fields which are still with class is_disabled
$('form').submit(function() {
    // find all fields with class is_isabled
    $("input.is_disabled, textarea.is_disabled, select.is_disabled").each(function(index){
        //  and remove them entirely
        $(this).remove();
    });
    return true;
});
// now don't let anyone click into the fields
// this will simulate the 'disabled' functionality
$('.is_disabled').click(function() {
  $('.is_disabled').blur();
});

Answer 6

I guess you can write the css for that than going ahead with JQuery. I have not tested it out. But if you disable a textarea, it should take care of the styles automatically. Add this to your stylesheet and let me know....

input[disabled][type='text'], textarea[disabled]{ color: rgb(0,0,0); background-color:Silver;}

Answer 7

I also looked for a simple, scriptless solution. The following worked for me in IE 8. The idea is to use background transparency and a filter to transform and colorize the text. This darkens the disabled text just enough to make it readable.

textarea[disabled], select[disabled], input[type='text'][disabled] {    
  /*required*/
  background-color:transparent; 
  filter: light;

  /*fine tuning*/
  font-weight:100;
  font-family: Tahoma;
  border: 1px solid;
  letter-spacing:1px;
}

The select doesn’t have a drop shadow, so make the text very thick to get a similar font-weight effect.

select[disabled] {
  font-weight:900;
}

Answer 8

input[disabled] and input[readonly] works in IE 7, 8 and 9 when you add this line to the html file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Answer 9

Afaicr in the HTML it looks a little something like <textarea disabled="disabled"> right? You could get away with textarea[disabled="disabled"] in IE7 (might not work in IE6 however).

fredrikholmstrom's answer is the best cross-browser solution.

Answer 10

Use a label overlay:

<asp:Label ID="lblTxtHider" runat="server" Text=""    CssClass="hidden" Enabled="false"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server" CssClass="frmItem" Visible="false" OnTextChanged="TextBox1_TextChanged"></asp:TextBox>

Then in CSS:

.disabledColorChanger {
position: absolute;
font-family: Arial;
font-size: 13px;
margin-top: 3px;
margin-left: 4px;
}
.disabledColorChanger[disabled] {
    display:none;
}

And in code when setting or disabling:

private void SetEnabled(bool enabled)
{
   lblTxtHider.Enabled = !enabled;
   TextBox1.Enabled = enabled;
   lblTxtHider.Text = TextBox1.Text;
}

And the CORRECTED code for detecting ie:

<script>
    $(document).ready(function () {
        var isIE = /*@cc_on!@*/false || !!document.documentMode;
        if (isIE) {
            document.getElementById("<%=lblTxtHider.ClientID%>").className = "disabledColorChanger";
        }
    });
</script>

Just set the label = the input value. Works for me.

Answer 11

You have two options (since IE 6/7 doesn't support the :disabled css-selector)

1. Use jQuery (or some other js-lib of your choosing) and apply a class to all disabled input elements, say: $("input:disabled, textarea:disabled").addClass("is-disabled");
2. Add the "is-disabled" class manually on the server side, this is of course only viable if you know before hand which elements will be disabled and which won't.