Styling the Form

Contact Us or call 1-877-932-8228
Styling the Form

Styling the Form

We've just said that we don't want to use CSS to style any of the form controls. But we do want to use CSS to layout the form and we can apply some formatting styles to the form, fieldset and legend elements.

First let's see what happens when we apply Eric Meyer's reset to CssForms/Demos/JobApplication4.html: Rest Applied

Not pretty, but it gives us a fresh start.

Before we style our form, let's look at another HTML5 attribute which, while not CSS, comes in handy when presenting forms: the placeholder attribute. It's often useful for users to see an example of the type of content we're expecting for a given field. A simple search text box might, for instance, display the word "search" in the box, giving the user a clear indication - without any label instructions or even a button next to it - the meaning and purpose of that particular text field. The HTML placeholder attribute:

<input type="text" name="searchfield" id="searchfield" placeholder="search">

will display the placeholder text until the user types in the field, after which the placeholder will disappear. We'll use the placeholder attribute in our "Job Title" field.

Now let's see what we need to do to the style sheet to make CssForms/Demos/JobApplication5.html look like this: Style Sheet

Let's start by looking at the complete style sheet and then we'll dissect it:

Code Sample:

CssForms/Demos/style.css
body {
	background-color:#ccc;	
}

h1 {
	width: 555px;
	margin: 5px auto;
	padding-bottom: 10px;
	border-bottom: 1px solid #930;
	font-size: xx-large;
	color: #930;
}

/*Begin Form Styles*/
form {
	width: 555px;
	margin: auto;
	padding-bottom: 20px;
	color: #930;
}

fieldset {
	margin-bottom: 10px;
	border-bottom: 1px solid #930;
	background-color: #eec;
}

legend {
	padding-left: 10px;
	font-size: 1.2em;
	font-weight: bold;
	letter-spacing: .5em;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-variant: small-caps;
	color: #460;
}

fieldset fieldset {
	margin-top: 10px;	
	border-bottom: none;
}

fieldset fieldset legend {
	font-size: 1em;
	font-weight: bold;
	letter-spacing: .4em;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #333;
}

form ol {
	padding: 20px;
}

fieldset fieldset ol {
	margin-top: -10px;
}

form p {
	margin: 10px;
	font-size: .8em;
}

form li {
	list-style-type: none;
	border-bottom: 1px dotted #000;	
	padding-bottom: 2px;
	margin-bottom: 2px;
}

label {
	width: 200px;
	float: left;
	font-weight: bold;
}

span.label {
	font-weight: bold;
}

li.radioContainer label {
	display: block;
	float: none;
	font-weight: normal;
}

select, input[type="text"] {
	width :200px;	
}

textarea {
	width: 400px;
	height: 50px;
}

#buttons {
	text-align: center;	
}

#buttons input {
	height: 50px;
	width: 150px;
	font-size: 1.5em;
	color: #930;
	font-variant: small-caps;
	margin: 10px;
}
/*End Form Styles*/

Code Explanation

Most of the CSS should be pretty easy to follow. Here are some things to notice:

  1. The rule below takes away the bottom border from fieldsets that are nested within other fieldsets:
    fieldset fieldset {
    	margin-top: 10px;	
    	border-bottom: none;
    }
  2. The selector fieldset fieldset legend only applies to legends inside of fieldsets that are nested within other fieldsets. This is to make the "headings" of form subsections appear differently from the headings of the main sections.
  3. The rule below removes the numbers from the list items, adds a dotted line beneath each "question", and creates some vertical space between the "questions."
    form li {
    	list-style-type: none;
    	border-bottom: 1px dotted #000;	
    	padding-bottom: 2px;
    	margin-bottom: 2px;
    }
  4. The float: left; declaration changes the element from inline to block, which will bring its associated form control up to the right of the label:
    label {
    	width: 200px;
    	float: left;
    	font-weight: bold;
    }
  5. This rule turns off the float property for labels that appear in list items with the "radioContainer" class. Since the label is not floated anymore it will revert back to displaying inline. To keep it displayed on a separate line we add in the display:block; setting:
    li.radioContainer label {
    	display: block;
    	float: none;
    	font-weight: normal;
    }
    Remember, these are the label elements that surround the radio button and its presentation value, like this:
    <li class="radioContainer">
    	<span class="label">Have you ever been convicted of a felony?:</span>
    	<label><input type="radio" name="Felony" id="FelonyNo" title="Felony Yes" /> Yes</label>
    	<label><input type="radio" name="Felony" id="FelonyYes" title="Felony No" /> No</label>
    </li>
  6. This rule sets a width for the select and text input elements:
    select, input[type="text"] {
    	width: 200px;	
    }
  7. This rule sets a height and width for the textareas, overriding the cols and rows values:
    textarea {
    	width: 400px;
    	height: 50px;
    }
  8. And these last two rules style the buttons:
    #buttons {
    	text-align:center;	
    }
    
    #buttons input {
    	height: 50px;
    	width: 150px;
    	font-size: 1.5em;
    	color: #930;
    	font-variant: small-caps;
    	margin: 10px;
    }
    Note that we recommended earlier that you should leave form controls alone. Changing the height and width of form controls doesn't change any of their other default behaviors or styles, so this is not necessarily bad, but you should certainly test it carefully in all your target browsers and operating systems.

Although there are other ways to layout the HTML for forms, we like the use of an ordered list as it makes sense semantically and doesn't require extraneous tags used for formatting purposes only.

Next