Question

I am looking to disable a few html controls and I am running into cross browser issues with the differences between IE and Firefox/Webkit browsers. The primary issue is evident with the following line:

<input type="text" name="badIE" disabled="disabled" style="color:blue;" value="IE won't show this correctly" /> 

In IE, the above input would have grey text, while the text is blue in every other browser I have tested. It would appear that IE allows the disabled field of a text input to take precedence over the CSS rules for the text color. Is there any established best practice or IE CSS hack to address this type of issue?

Answer 1

It turns out that there are few different ways to attack this problem but there isn’t one exact answer. In order to provide the most complete answer possible, here is a list of the possible solutions.

1. Accept the differences between browsers and continue using the disabled field. This is probably the right answer. As chipcullen suggested on his comment, there is rarely a necessity that all browsers look identical. It is better to simply accept the differences between and work with them.

2. Use the readonly attribute instead of disabled. The problem with this method is that a user can still interact with a readonly control. For example, users could focus on the control or stick a blinking cursor in the middle of the text. If interaction is a major concern, you can always shield the disabled control behind an invisible element, although that method is on the hacky side.

3. The option I chose was to replace the input elements with a pure text element. Although this method might not be as straightforward as it might sound. My page was interactive and certain elements would be enabled/disabled depending on client side actions. In order to handle the transition, I threw together the following Javascript (after chipcullen’s suggestion and with the help of jQuery):

   function disabledToSpan() {
   $('input[type=text]:disabled, textarea:disabled').replaceWith(function () {
       return $('<span>' + $(this).val() + '</span>').attr('class',
           $(this).attr('class')).addClass('disabledTextInput');
       });
   }
   

   In summary, this will find all disabled text inputs and textareas, switch them to spans while preserving both their values and classes, before finally adding a disabledTextInput class to specially stylize the disabled elements.