What's the CSS style I need to make a readonly textbox control look disabled

Question

Just to pre-empt the 'why do you want to do this' replies Here's what I'm doing:

If another control is clicked I make an ajax call to get a server generated value and stuff it in the textbox. I then, on the client-side, set the control to readOnly (I don't want to control to be disabled as I need it to postback so Im setting the readOnly attribute).

Unfortunately as readOnly it doesn't look 'disabled'

I'd like to get that disabled textbox look by doing an .addClass.

I've mucked around with various styles but I'm no closer to getting that look.

By the way this will be in IE (and could be IE7 or lower so no outline style I'm afraid).

Any ideas gratefully received.

Answer 1

Best way is to disable a textbox in the normal way then take a screen shot of the page and load it up in a image editor program and grab the colours of the textbox backgrond, border colours etc. Then you can set it via CSS like so:

input.readOnlyTextBox
{
    background-color: #F2F2F2 !important;
    color: #C6C6C6;
    border-color: #ddd;
}

Remember though the disabled look may look slightly different from browser to browser, but this will get you an approximate disabled look.

Answer 2

Disabled form elements look different from browser to browser. If you don't want your site to look inconsistent and sloppy, then you should style all of your input elements, or at least all of your checkboxes - enabled, disabled and readonly. Then you can determine what a readonly input looks like, without having to try to match four or five different browsers.

Answer 3

I don't want to control to be disabled as I need it to postback so Im setting the readOnly attribute

Set it to disabled, and create a hidden input with the same name containing the same value to do the real submission.

It's a hack, but the only way you can reliably get the correct ‘disabled’ look across all browsers is to really use ‘disabled’. The styling is too inconsistent across platforms, browser, settings and themes for you to be able to reproduce it reliably.

Answer 4

I can think of two ways.

1. Put a "dummy" disabled field on top of the field using CSS positioning. This way it matches whatever style the browser uses. If the user clicks on it, they are clicking in the disabled field.
2. Similar to #1, use a hidden field for the value to be submitted. The "display" field is just an extra field for display purposes that can be disabled/enabled and is ignored for data processing.

Answer 5

I have just played with it. I am disabling input items using JS and JQuery. On a form I have one checkbox with "disabler" class and items that are going to be disabled marked with "disableable" class.
Faced the same problem as you and resolved it putting and removing hidded field on the fly using JQuery DOM manipulation. Works correct across the browsers.
This function is bound with disabler.onClick and form.onLoad:

$.My.InitDisabler = function() {
    if (!$('.disabler').attr('checked')) {
        $('.disableable').each(function() {
            $(this).attr("disabled", "true");
            var templ = '<input name="{0}" type="hidden" value="{1}" class="disable_hdn" />';
            $(this).after($.format(templ, $(this).attr("name"), $(this).val()));
        });
    }
    else {
        $('.disable_hdn').remove();
        $('.disableable').removeAttr("disabled");
    }
}