Here’s a fieldset with no styling as displayed in the Firefox browser.

The default Firefox fieldset is a gray border around the enclosed form fields. I’ll start with the border. This rule will change the make it solid, 2 pixels in width, and a dark blue.

fieldset {
border: 2px solid #00F;
}

This changes the appearance:

Any border width, style or color could be used. Next, I’ll round the corners. With one CSS declaration for any browsers that may support the border-radius property in the future, one declaration for webkit browsers like Safari, and one declaration for Mozilla based browsers like Firefox. Three declarations are necessary because the border-radius property is not fully adopted yet.

fieldset {
border: 2px solid #00F;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}

In Firefox, you now see this.

I want to change the alignment in the form. That has nothing to do with the fieldset, but it will look better if the fields align. This is the rule added.

label {
padding: 3px;
display: block;
}

The new appearance.

Many rules can be applied to the label element. Color, font, and other aspects of the label appearance can be styled.

There are still many things that can be styled about the fieldset. Width, background-color, background-image and others. Here’s the fieldset with a gradient background image added to the fieldset rule.

fieldset {
border: 2px solid #00F;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
background: url(fieldsetbg.jpg) no-repeat left top;
}

The effect is this.

What about legends?

Web Teacher reviewed Fancy Form Design a few days ago. One of the things I learned in that fine little book is that screen readers such as JAWS announce the fieldset legend anew for each new field in the fieldset. The example in Fancy Form Design uses a fieldset with the legend “Change Password” and fields labeled “Current Password” and “New Password.” The authors pointed out that hearing the screen reader say “Change Password” before each of the form labels can be quite a lot of listening to the word “password.” As the authors also pointed out, not every screen reader even announces the legend at all.

Before I explain the solution from Fancy Form Design, here’s how the fieldset would look with an unstyled legend added.

So you’ll see what some of the possibilities are with styling a legend, I’ll show you a legend with the following rule applied.

legend {
font-weight: bold;
font-size: 1.5em;
color: #03F;
border: 1px solid #03F;
padding: 5px;
}

Here’s how it looks.

Much more can be done to the legend with CSS. For example, the corners could be rounded, the background could be styled, the font could be changed, and so on.

For this example form, I don’t think it would be too much for a screen reader to announce, “Your contact information, full name” followed by “Your contact information, email,” and “Your contact information, telephone.” I might decide to use the legend here.

In Fancy Form Design, the authors suggest using a heading before the fieldset, rather than using a legend in the fieldset. With a heading rather than a legend, the screen reader would read the heading just once. Visually, it still makes sense. Here it is with an unstyled h3 element.

My advice is to decide whether or not a legend makes sense on a case-by-case basis.

Conclusion

You can style a fieldset like a pro when you realize that everything you know about CSS can be applied to the elements, classes and ids that exist as hooks for CSS rules within the HTML used to construct the form. Everything you know about styling fonts, colors, backgrounds, borders, padding, margin, width, display, and other CSS properties can be applied to styling fieldsets.

See also:

• Three examples of fieldsets styled with CSS
• Styling a fieldset with CSS

© vdebolt for Web Teacher, 2009. | Permalink | No comment | ]]> http://www.webteacher.ws/2009/12/10/style-fieldsets-like-a-pro/feed/ 0 http://www.webteacher.ws/2009/12/06/review-handcrafted-css/ http://www.webteacher.ws/2009/12/06/review-handcrafted-css/#comments Sun, 06 Dec 2009 15:57:00 +0000 vdebolt http://www.webteacher.ws/?p=3554

product

A review by Web Teacher of
Handcrafted CSS: More Bulletproof Web Design, Video Edition (includes Handcrafted CSS book and Handcrafted CSS: Bulletproof Essentials DVD)

(rating: 5 stars)

Handcrafted CSS: More Bulletproof Web Design by Dan Cederholm with Ethan Marcotte is from New Riders (2010). It’s a beautiful book designed by Cederholm himself. Most of it was written by Cederholm. Marcotte contriubuted one chapter called “The Fluid Grid”.

Cederholm’s trademark style is to examine every angle of a problem—such as the way to display a menu with an item and a price or the way to create rounded corners. After looking at the various options, he selects the one he considers the most bulletproof and recommends it for use.  To be bulletproof, a design solution must be flexible enough to work in many browsers (or at least not differ beyond use in some browsers), be functional with various levels of zoom, be accessible, and be workable in terms of future upkeep.

Many of the techniques in the book use CSS3. There’s also some jQuery in the mix. No HTML5, though he does suggest it’s the next big thing.

He concentrates on a few “crafty” CSS techniques in the slender volume. This book is not a complete guide to CSS. It deals with selected design problems. The specific topics getting the Cederholm treatment in this book:

• his flexible approach to problem solving with CSS
• rounded corners and background clipping
• text-shadow
• RGBA and opacity, with several lovely design tricks well explained
• his progressive enhancement philosophy aimed at better browsers and letting go of pixel perfect sameness in lesser browser
• modular float management, a very cool idea for dealing with float problems
• fluid designs with percentages and ems, even fluid media sizing (this is Ethan’s chapter)
• typography and @font-face
• select jQuery enhancements

Well written and clear to implement ideas are what you’ll find in this book. You need to know HTML and CSS before you dig in.

Summary: A select set of CSS improvements for designers.