CSS Web Design

There may be certain cases in which you want to disable a section of a form yet you still want your users to know it’s there. For example if certain options in the form are only available to paid members but not for users of the free product. Graying out those options for non-paying members can serve as an incentive to encourage them to subscribe to your paid service. (Include some extra text explaining why the options are grayed out along with a subscription link.)

Steps (Ideally you would accomplish these using JavaScript, PHP or another language instead of hard-coding)

1. Add a classname like “disabled” to the containing fieldset or other containing element of the section you wish to disable. (Or if you only wish to disable one or a few scattered elements add the classname to those individual elements.) Use this classname to style the grayed out section.
2. Add the attribute disabled="disabled" to each form element, e.g. inputs, select tags, textareas, radio buttons or check box tags.
3. Add an extra paragraph containing text with an explanation and a link to more information or to a subscription form if appropriate.

Ideas for Styling

If you are disabling a whole section such as a fieldset or applying styles to another element containing the form elements you could add a special background color, special text colors or borders (gray shades would be appropriate).

Another nice elegant way to style your grayed out elements would be to make them partially transparent:

.disabled
{filter: alpha(opacity=60);
-moz-opacity: .60;
opacity: .60;}