Assembling Forms and Applications - HTML5 with CSS3 - page 289

With all of that said, a web designer can easily, through artful application of CSS, influence the overall
layout and design of the form and the page in which it resides. The presentation of the controls themselves
may sometimes be beyond the designer's reach, but the elements around them are fair game for styling.
Removing the Border from fieldsets
The majority of web browsers display a fieldset element with a border and a bit of padding by default.
The border exists for a reason—to visually indicate the boundaries of the group—but it's not always a
desirable part of a design. Luckily you can disable the border very easily with CSS, as you see in
Listing 8-29.
Listing 8-29 . The border property with a value of none
fieldset {
border: none;
}
The none keyword instructs the browser to override any default or inherited values for border-style ; if
the style is none , there's no border at all. You can accomplish the same feat with border:0 , declaring 0 as
the value for border-width , and saving a few bytes in the process by eliminating three more characters
from your style sheet.
The border property is CSS shorthand, automatically applying the same value to all four sides of an
element without the need to call out each side individually. There is also an equivalent padding shorthand
property, shown in Listing 8-30, affecting the padding on all four sides of a box with a single declaration.
Listing 8-30 . The border and padding properties set to 0
fieldset {
border: 0;
padding: 0;
}
You can see the result in Figure 8-34. This is the same form you saw in Figure 8-27, only now the
fieldset s vanish into white space. The elements still exist in the markup, bringing all their semantic and
accessibility benefits with them, but their presentation has been altered to reduce visual clutter. We've also
removed the standard bullets from the unordered list, as you saw in Chapter 4, and we've shifted the list
items to the left to align with the other elements. It still isn't pretty, but it's a start in the right direction.
Figure 8-34 . The form as it appears without borders or padding around the field sets