Disabled Form Fields in Internet Explorer

Album Cover: Eyes Open

"It's hard to argue when you won't stop making sense."
Snow Patrol / Hands Open

Posted on September 28, 2005 9:49 PM in Web Design
Warning: This blog entry was written two or more years ago. Therefore, it may contain broken links, out-dated or misleading content, or information that is just plain wrong. Please read on with caution.

One of Internet Explorer's many annoyances is how it displays disabled form fields. As most web designers know, disabling form fields is a handy way to ensure that form input gets submitted in a logical and useful way by eliminating the chance of certain fields being submitted when other fields' information will suffice.

One practical example of this technique is disabling an address field when a zip code field has been filled in (either partially or completely). If you're familiar with most location-based services on the web, they frequently give you the option of searching for services based on your address or your zip code, but not necessarily both. In fact, when a zip code search is performed, chances are any address information you've filled out will be ignored.

To make things easier on the user, disabling the unnecessary field or fields makes it clear that that particular information is no longer necessary given the information that has already been provided. So, upon entering your zip code into a form, the web designer can ensure that the address form field gets disabled (via JavaScript).

This is all fine and dandy, but unfortunately not all web browsers make the fact that a form field has been disabled incredibly apparent. Let's look at an example. The following image illustrates the difference between disabled form fields in Firefox and Internet Explorer (incidentally, Opera 8.5 displays disabled form fields exactly as Firefox does):

Comparison Between Firefox and Internet Explorer's Rendering of Disabled Form Fields

As you can see, while Firefox makes it very clear that the form field has been disabled, Internet Explorer does not. Clicking on the field, of course, makes it evident in that neither browser lets you edit the contents of the field, but visually there is a very big difference here.

So how do you remedy the situation, you ask? Well, typically when you are disabling form fields on-the-fly, you're doing so via JavaScript. Given this fact, we can assume that you'll be able to insert some code into your disabling function to update the style of the form field being disabled (or enabled, in order to get the state back to normal). The following code does the trick:

document.getElementById('foo').style.backgroundColor = "#ddd";

As long as your form field has the "foo" id associated with it, you're good to go. It should look something like:

<input type="text" name="box" id="foo" />

So next time you disable form fields on-the-fly, keep this tip in mind so you know the big three browsers (on Windows, at least) are all rendering your disabled form fields in a similar fashion.

Comments

Charlottesville Media Group on October 23, 2006 at 1:12 PM:

If you want to change the style of a "disabled" item, Internet Explorer (at least, up to version 6.0) will not let you. To circumnavigate this, use the lesser-known but just-as-effective "readonly" attribute, which does not affect the default style for the input field and allows you to specify your own if you so desire.

Permalink

Michelle on December 19, 2007 at 9:38 PM:

Bless your loud blue "you're reading an old post---easy there killer" box. I've been Googling various Stupid JavaScript Tricks tonight while doing some dev work, and it's infuriating when content that looks like it might be relevant has no chronological context anywhere on the page.

One site I found tonight had a discussion of an issue that was giving me trouble, with a tiny screen capture of chevrolet.com illustrating the issue being discussed... I clicked through for a closer look and the Chevy site had been totally redesigned. You know what would have saved me a clickthrough to a completely non-relevant page that took approximately one hundred years to load up some even more non-relevant Flash? A DATESTAMP!

Thanks for going to the opposite extreme and thanks for letting me vent. When I'm president I'm going to make datestamping the law. Watch me!

Permalink

Mike H on April 22, 2009 at 8:49 AM:

I've got a need for an almost opposite behavior of how Firefox handles disabled fields... It seems that when the field is disabled, at least on my current install / color preferences / font sizes, the text in the Disabled field is bloody near unreadable, as there is maybe 2 shades of grey different between foreground and background..

Is there any way, through use of a Greasemonkey scriptlet or somesuch that I can set the color of any disabled field to be say, same grey background, but a much more contrasting color for the text? either white or black would work.. i swear its #D0D0D0 for the background, #D2D2D2 for the text as it is now... Ugh! I need to read these fields :)

Another pondering- would it be possible through the same sort of greasemonkey scriptlet to actually be able to cut/paste this disabled field like IE allows?

Permalink

Nanamin on August 04, 2009 at 1:32 PM:

Thank you for the helpful article.

Also, your website layout is *beautiful*. I'm very inspired.

Permalink

Bernie Zimmermann on August 05, 2009 at 10:18 AM:

Thanks Nanamin. I'm glad you like it.

Permalink

There are more user are connect the wireless device on connect the window10. then you are connect the new working on this website this is the best of the other working.

Permalink

Post Comments

If you feel like commenting on the above item, use the form below. Your email address will be used for personal contact reasons only, and will not be shown on this website.

Name:

Email Address:

Website:

Comments:

Check this box if you hate spam.