HTML and CSS Reference
In-Depth Information
The
width
attribute ensures that all the labels will have the same distance to work with. A constant
margin-right
attribute keeps the form controls the same number of pixels (in this case) to the right.
And, as shown in Figure 20-5, the
text-align
property works just as well here as in the table cells.
Finally, the
clear:left
declaration stops the
float
property from extending to the next line.
FiGure 20-5
styling Fieldsets and Legends
If your form includes one or more
<fieldset>
and
<legend>
tags, they provide very handy hooks
on which to hang some distinctive CSS. You can easily add a background color and border to make
both stand out, as well as padding and margins to keep the form controls easy to read. As shown in
Figure 20-6, the following CSS rules give the fieldset selector a light-orange background, complete
with rounded corners in modern browsers (note, the color is not visible in this grayscale figure):
fieldset {
margin: 0;
padding: .5em;
background: #FF9900;
border: 1px solid #000000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
legend {
padding: .2em;
background-color: #EBEBFF;
font-weight: bold;
color: #000000;
border: 1px solid #000000;
}
FiGure 20-6
