Disabling a textarea and text input while maintaining a consistent cross browser style

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?

score 1 · Answer 1 · edited May 23 '17 at 12:29

1

According to the upvoted (but not accepted) answer here, you're kind of stuck with using 'readonly'.

Just out of curiousity - why are you displaying text in a textarea that you don't even want your users to be able to focus on? Seems to me you'd be better off displaying that in a regular text HTML element (e.g. <p>).

edited May 23 '17 at 12:29

Community

1
1

answered Aug 01 '12 at 17:21

chipcullen

6,840
1
21
17

The controls will not be consistently disabled, but will react to user input on other parts of the page. Instead of enabling/disabling the inputs, I could potentially swap them out for their pure text equivalent. Although that will add an extra level of complexity as I would need to duplicate multiple controls as well as the code behind them. If there was a pure CSS solution, that would certainly be cleaner and easier to implement. I will update the question to reflect your point. – sglantz Aug 01 '12 at 17:38
Yeah, I don't think there is a pure CSS solution. Does it really break the experience if the 'disabled' text is grey (as opposed to the color you intend)? Generally, users don't hop from one browser to another and check the layout (like we do). If you left IE to it's own devices, would the experience still work? I'd treat this like CSS3 support - great if the browser supports it, but if it doesn't break without it, let it be. See: http://dowebsitesneedtolookexactlythesameineverybrowser.com/ – chipcullen Aug 01 '12 at 18:55
I was thinking about it, and if you do need to swap elements, it probably wouldn't be hard with jquery to change
to and back again. (Of course, I say this without trying it - but it sounds easy!)
– chipcullen Aug 01 '12 at 18:57

score 0 · Accepted Answer · edited May 23 '17 at 12:27

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.

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

Disabling a textarea and text input while maintaining a consistent cross browser style

2 Answers2