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:
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:
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 }
