CSS - Advanced Form Styling (includes Radio Buttons, Text Fields, and Submit Button)

Last Update: 2.24.2009

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.

About You


Favorite Food?



Code

Here's the XHTML that makes up the form.

<form>
<form action="test.html">
<fieldset>
  <legend>About You</legend>
  <label for="first">First Name:</label>
  <input type="text" name="first_name" id="first" size="20" maxlength="50" /><br />
  <label for="last">Family or Last Name:</label>
  <input type="text" name="last_name" id="last" size="20" maxlength="50" /><br />
  <label for="desc">Famous for:</label>
  <textarea rows="5" cols="20" id="desc">What is your claim to fame?</textarea><br />

  <fieldset class="favorites">
	<legend>Favorite Food?</legend>
	<input type="radio" id="cupcakes" value="Cupcakes" name="food" /><label for="cupcakes"> Cupcakes</label><br />
	<input type="radio" id="pizza" value="Pizza" name="food" /><label for="pizza"> Pizza</label><br />
	<input type="radio" id="sushi" value="Sushi" name="food" /><label for="sushi"> Sushi</label><br />
  </fieldset>

  <input type="submit" value="Submit" id="submit" />

</fieldset>
</form>

And here's the CSS that gets the job done.

<style type="text/css">
form
  { width: 28em; 
    margin: 5px; 
    padding: 5px;
    font-family: "Trebuchet MS", Trebuchet, "Gill Sans", "Gill Sans MT", Helvetica, Verdana, Arial, sans-serif;
    } 
fieldset
  { border: solid #000000 1px; 
    } 
label
  { width: 6em; 
    float: left; 
    text-align: right; 
    margin: .5em 1em; 
    clear: both;
    }
input[type="text"], textarea
  { font-family: "Trebuchet MS", Trebuchet, "Gill Sans", "Gill Sans MT", Helvetica, Verdana, Arial, sans-serif;
    font-size: small;
    margin: .5em 0;
    padding: .1em;
    width: 17em;
    border: 1px solid #666;
    }
input[type="submit"]
  { float: none; 
    clear: both; 
    width: auto; 
    margin-top: 1em; 
    margin-left: 8em;
    }
fieldset.favorites
  { width: 50%;
    border-color: #999999;
    }
fieldset.favorites label
  { width: auto; 
    float: none; 
    text-align: left; 
    margin: 0;
    padding: 0;
    }
br { clear: both; }
</style>

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.

<!--[if lte IE 6]>
<style type="text/css">
input#first, input#last
  { font-family: "Trebuchet MS", Trebuchet, "Gill Sans", "Gill Sans MT", Helvetica, Verdana, Arial, sans-serif;
    font-size: small;
    margin: .5em 0;
    padding: .1em;
    width: 17em;
    border: 1px solid #666;
    }
input#submit
  { float: none; 
    clear: both; 
    width: auto; 
    margin-top: 1em; 
    margin-left: 8em;
    margin-bottom: 10px;
    }
fieldset.favorites
  {	margin-left: 10px; }
textarea
  { font-family: "Trebuchet MS", Trebuchet, "Gill Sans", "Gill Sans MT", Helvetica, Verdana, Arial, sans-serif;
    font-size: small;
    margin: .5em 0;
    padding: .1em;
    width: 17em;
    border: 1px solid #666;
    }
</style>
<![endif]-->

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.


Looking for more?

Back to Pew Pew Laser Articles

Contact Me