CSS Form Styling

In many ways, forms are the real workhorses of thethe CSS rule is defined, set the class of a selected
Web, but that doesn't mean they have to be plain.text field from the Property Inspector.
Until CSS use became prevalent, little could be doneDistinguishing Lists and Menus
to alter the way forms and form elements looked onThe select list/menu object is composed of two
the Web. Standardizing text field sizes between PCtags: select and option. The select tag is the overall
and Macintosh was a problem because the differentcontainer for the list items; use the select tag to
operating systems interpreted character widthstyle the width, typeface, and font size of all
differently; moreover, the field sizes may vary fromdrop-down lists on the page uniformly. Individual list
browser to browser.items can be styled by setting a class on the
CSS form design gives the designer much moreseparate option tags. Although this operation must be
flexibility, both to integrate and isolate the form andperformed by hand and is somewhat tedious, it does
form elements. Text fields, for example, can take onopen the door to many possibilities.
a shade of a site's background color or adopt theIf you have a very long drop-down list that includes a
same typeface used on the page. Similarly, you canwide-range of items organized by category, with
draw attention to the form itself by giving it ajudicious CSS styling, main category headings can be
contrasting background; this enables you to formatin one color and subitems in another.
lengthy drop-down lists for easy reading.Changing Labels and Legends
Encompassing the FormA form is more than a collection of text fields and
The form tag is a containing element that, like the divcheckboxes; labels play an equally important role in
tag, is not rendered by default. Both tags, in fact,form organization and usability. Form labels are often
can be styled with CSS - you can even position aapplied in one of two ways. The standard technique
form on the page via CSS declarations. Browseris to place most of the labels in a single column of a
support varies for some of the more esoteric CSStable, with the form elements in another. Designers
properties applied to the form tag, but moreare also increasingly using the label tag as a means of
common attributes such as background color andenhancing accessibility. A Dreamweaver CSS
border are rendered properly in most cases. Best ofmethodology is available for whichever route you
all, if CSS does not support certain attributes, thesetake when labeling your forms.
attributes are just ignored and the form rendersIn a situation where all the labels are arranged in a
plainly.table column, it's best to create a CSS class for your
Frequently, a Web page only contains a single form.labels and apply it to the td tags. The most efficient
In these situations, styling the form tag itself willway to do this is to first select the column containing
have the desired results. For example, this CSS rulethe labels and then choose the desired class from the
gives the entire form a bright orange background andStyle list on the Property inspector. Dreamweaver
a blue border:form {background: #FF9900;border: thinapplies the selected class to each of the td cells in
solid #0000FF;padding: 10px;the column.
}If your layout uses label tags, CSS control is even
Padding is added to move the form elements in fromeasier. Add a specific CSS style for the label tag to
the edges. Should your page contain more than onecreate a uniform appearance for all your labels. Note
form and you want to style each one differently,that you may still need to adjust the dimensions of
create a CSS ID selector for each form. In thisthe label column separately because setting the width
situation, choose the advanced selector in the Newin CSS for the label tag has no effect.
CSS Rule dialog box and enter a unique ID - such asTwo other form-related tags - fieldset and legend -
form#topform or form#bottomform - in the Selectorare available for CSS styling. As described earlier in
field. Also set the ID of the form tag when using thisthis chapter in the sidebar "Grouping Form Controls,"
method.the two are used together to visually associate
Altering Input Fieldsrelated form elements. Style the fieldset tag to alter
One way in which the form and div tags differ inthe outlining border or add padding from the edge of
regard to CSS is in the matter of inheritance.the border. Change the legend style when you want
Elements within a form do not inherit the CSSto give it a separate background color and/or border.
properties of the form, but elements within a div tagHighlighting Focus
do inherit the div's CSS attributes. You must,Want to spotlight the interactivity of a form? CSS
therefore, take another route for styling all the textincludes a pseudo-element selector (so called because
fields in a given form. The best way to affectit is valid only when an element is in a particular state)
multiple form elements all at once is to style the inputthat takes effect when a form element is selected.
tag. You may recall that the input tag is used toThe CSS selector is:focus and it works with input,
create text fields, radio buttons, checkboxes, andselect, and textarea tags.
Submit buttons.To create a:focus selector, follow these steps:
For example, this CSS rule gives all the input elements1. Select New CSS Rule from the CSS Styles panel.
a uniform background color as well as a specific color,2. In the New CSS Rule dialog box, select the
font, and size for the text fields:inputAdvanced selector option.
{background-color: #F5F5F5;color: #660099;font: 10px3. Enter the name of the tag you want to affect
Verdana, Arial, Helvetica, sans-serif;followed by:focus in the Selector field. For example, if
}you wanted to alter all the text fields, radio buttons,
CSS styles the text fields for initial text as well ascheckboxes, and buttons when they receive focus,
text entered by the user.enter input:focus.
Tip: Remember that a multiline text field is really a4. Click OK to close the New CSS Rule dialog and
different tag textarea than the single-line text field.open the CSS Rule Definition dialog.
You have to create a CSS rule for both input and5. Choose the desired styles from the various
textarea tags.categories and click OK when you're finished.
One of the best uses for CSS and text fields isPreview the page in a compatible browser such as
setting the width. This method is far more flexibleMozilla Firefox, Netscape 6 or better, Safari, and so
and responsive than using the Char Width field on theon to experience the CSS changes.
Property inspector for each individual text field. It isCaution: Unfortunately, the:focus selector is not
best to set the width on a CSS class rather thansupported in any version of Internet Explorer, as of
alter it directly in the CSS rule for the input tag.this writing. You can, however, simulate the effect
Why? The width setting not only affects all theby triggering JavaScript functions with the onFocus()
single-line text fields, but it also alters checkboxesand onBlur() events that manipulate the class
and radio buttons - which are also input tags. Afterattributes.