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.

score 10 · Answer 1 · answered Oct 08 '09 at 13:16

10

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.

answered Oct 08 '09 at 13:16

Sunday Ironfoot

12,840
15
75
91

Yeah, I suspect without the outline style (which it seems IE7 doesn't support) I'm going to struggle. It's that 'double' border I'm having trouble styling. :o( – user129345 Oct 08 '09 at 13:36

score 4 · Answer 2 · answered Oct 08 '09 at 13:36

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.

score 1 · Answer 3 · answered Oct 08 '09 at 13:44

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.

Sure beats messing with CSS. While we're on dodgy hacks, you could also enable the fields just before submitting. — Stuart Dobson, Dec 19 '12 at 03:57

score 1 · Answer 4 · answered Oct 08 '09 at 13:44

I can think of two ways.

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

score 0 · Accepted Answer · answered Oct 09 '09 at 09:32

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

score 0 · Answer 6 · edited May 23 '17 at 12:16

0

I found this comment on a related answer:

To get the "readonly" input field to LOOK like the "disabled" field, set 'style="color: grey; background-color: #F0F0F0;"'. – Dan Nissenbaum Feb 28 '11 at 5:05

I've tried it, and it works perfectly!

To sum up:

style="color: grey; background-color: #F0F0F0;"

edited May 23 '17 at 12:16

Community

1
1

answered Nov 11 '14 at 20:56

Jake Toronto

3,524
2
23
27

score 0 · Answer 7 · answered Feb 07 '17 at 15:26

I know this as been answered but wanted to give my CSS example.

Because when I was searching for a solution, how to style a input field so it looked like it was disabled, I always ended up with an input field looking like this.

With the border- left & top having a darker color etc. So a solved it using this CSS code.

input[readonly]{
  border-color: darkgrey;
  border-style: solid;
  border-width: 1px;
  background-color: rgb(235, 235, 228);
  color: rgb(84, 84, 84);
  padding: 2px 0px;
}

Made an jsfiddle so you guys can take a closer look.

It looks good on Chrome, on other browsers you need to modify the colors abit. Like in Firefox you need too change the color and Background-color to etc.

background-color: rgb(240, 240, 240);
color: rgb(109, 109, 109);

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

7 Answers7