Thursday, November 18, 2010

Making readonly form fields easier to identify

Readonly form controls, or "disabled" in the HTML parlance, can be hard to distinguish from fields users can type into. Firefox and IE are doing an equally bad job, and making the distinction would be close to impossible if the field was empty to start with:

How default readonly input and text area are rendered by IE 7 and Firefox 4

Adding a grey background to disabled fields is a good way to help users distinguish between readonly (disabled) and read-write (non-disabled) form controls:

How readonly input and text area are rendered by IE 7 and Firefox 4 using a background color

IE 7 onwards supports CSS attribute selectors, so if you don't need to support IE 6, the following CSS will do the trick:

textarea[disabled], input[disabled] { background-color: #eee }

However, if you need to support IE 6, you'll need to decorate your readonly form controls with a class. Some frameworks, such as some XForms implementations, do this automatically for you. For instance, if all your readonly form controls are automatically inside an element with the class xforms-readonly, you can write:

.xforms-readonly textarea, .xforms-readonly input { background-color: #eee }

No comments: