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
Search WWH ::

Custom Search