CSS - Advanced Form Styling (includes Radio Buttons, Text Fields, and Submit Button)
Introduction
This article demonstrates creating a nicely styled and XHTML Strict validating form. This table-free form is simple to update, and highly accessible.
Forms in Strict XHTML documents may have only block level elements as their children, which excludes putting form elements such as label or input directly in a form. Instead, keep everything contained inside tidy and semantic fieldsets. An additional advantage of using the fieldset element is that you can then use the legend as an additional styling hook.
Demonstration
Here is the example form - lightweight, semantic, and accessible. In addition to the 3 input fields and a submit button, this form contains 2 fieldsets and some radio buttons.
Code
Here's the XHTML that makes up the form.
And here's the CSS that gets the job done.
This form incorporates many of the tricks of the Simple CSS Form. Additionally, it includes some radio buttons, and 2 fieldsets.
IE6 Modifications
This has been tested in Firefox 2, Internet Explorer 7, and Safari 3. Unfortunately, the code presented above won't quite work in IE6 (and lower versions, presumably). Since IE6 doesn't recognize attributes as CSS selectors, you'll need to add just a few declarations using conditional comments.
Credits
This form was originally an example from Web Design in a Nutshell, 3rd Edition. Webcredible has a similar example of this simple CSS form, and Smashing Magazine provides some more advanced examples of form styling.
