Stupid Web Tricks: Make disabled text more readable with the readonly attribute

Want to disable a text area but don't like the hard-to-read gray text? Here's a solution using the readonly attribute.

One of the sure signs that I'm getting older, other than the aches and pains, is that it's getting harder to read the information on a Web page in a disabled text input or text area. The grayed-out letters have a tendency to blend in with the background for old folks like me, who can still remember good old Windows 2000.

Thankfully, there's a solution that's cheaper than Lasik surgery, and it's called the readonly attribute. This attribute displays the same dark high-contrast letters as normal text does, but with the same "look but don't touch" features as the disabled attribute. The best of both worlds.

Listing A provides an example of how this attribute is used, while Listing B shows it in action. All in all, it's a nice low-cost alternative to a trip to the ophthalmologist.

Editor's Picks

Free Newsletters, In your Inbox