Recipe 7.3. Applying Different Styles to Different Input Elements in the Same Form

Problem

You want to style multiple input elements differently in the same form.

Solution

Use two or more different class selectors to apply different styles.

First, apply class attributes with different values to the input elements:

<label for="fmname">Name</label> <input type="text" name="fmname"  /> <label for="fmemail">Email</label> <input type="text" name="fmemail"  />

Then set up the styles for each class attribute in the input elements:

                .fmname {  text-align: left; } .fmemail {  text-align: center; }

Discussion

The technique of using class selectors to apply multiple styles to common elements within one page works in most browsers.

Another method of assigning different styles to common elements is available through browsers that understand the CSS 3 specification for attribute selectors as discussed in Recipe 6.2.

See Also

Recipe 6.7 for styling different form buttons in the same form.