HTML forms are fantastically useful things, but by default they tend to look like something only a mother could love. Fortunately, with the aid of CSS, you can really transform the look of an HTML form, and make it much easier on the eye. This tutorial shows you how.
An example form
Let’s take the ugly checkout form featured in the Creating accessible forms tutorial. Here’s the ugly form with no CSS styling, and here’s the same form, styled using CSS.
Take a look at the source of the pretty form — the CSS is in the head
element near the top of the page. Let’s briefly work through how we styled the form elements.
Styling the form
element
form
{
width: 400px;
color: #3E4A49;
background-color: #FEF7D6;
padding: 20px;
border: 2px solid #4899BE;
font-family: "Trebuchet MS", Arial, Helvetica, Sans-serif;
font-size: 0.8em;
}
Here we’ve set a fixed width on the form to prevent it stretching too wide, and set a nice colour and background colour. The padding gives the form room to “breathe”. Finally we’ve set a pretty blue border around the form, given all the text in the form a nice font, and taken the font size down a bit to make it more visually appealing.
Styling the fieldset
elements
fieldset
{
padding: 0 20px 20px;
margin: 0 0 20px;
border: 1px solid #3E4A49;
}
Now we style each of our fieldset
elements with some padding, margin, and a nice solid border to replace the default inset border.
Styling the legend
elements
legend
{
color: #FFFFFF;
background-color: #4899BE;
font-family: Arial, Helvetica, Sans-serif;
font-size: 0.9em;
font-weight: bold;
padding: 5px;
margin-bottom: 0;
width: 9em;
border: 1px solid #3E4A49;
}
We give the form legends a nice white-on-blue colour scheme and set a bold, smaller Arial font face for a bit of variety. Some padding stops the legend looking cramped, and we set a zero bottom margin to ensure that the gap between the legend and the first field below is consistent across all browsers. Finally we set a fixed width on the legends so they look nice and consistent, and give them the same border colour as the fieldset.
Styling the label
elements
label
{
display: block;
float: left;
clear: left;
text-align: right;
width: 30%;
padding-top: 0.25em;
margin: 1em 5px 0 0;
}
Now comes the clever stuff. To make sure that our form labels and fields line up nicely, we set the normally inline label
elements to display: block
so that we can float them to the left of the fields. We use clear: left
to ensure that each label clears the float above it and starts flush with the left margin. Aligning the text right makes all the colons line up nicely. Finally we set a width on the labels (required for floated elements), a small amount of padding (to keep the label text vertically aligned with the field), a top margin to add vertical space between the fields, and a 5-pixel right margin to separate each label from its respective field.
Styling the form fields
input, select
{
margin: 1em 0 0 0;
width: 50%;
border: 1px solid #FEF7D6;
padding: 2px;
background: transparent url("field_bg.gif") no-repeat 0 0;
}
Now we style the form fields themselves. We give them the same top margin as the labels and set them to a fixed width (50% of the form width). We then give them a border with the same colour as the form background (i.e. invisible) and set a background image to give that nice inner shadow style (an effect well known to you if you’re a Safari user!). We also add a bit of padding so that our field text doesn’t sit on top of the shadow.
input:focus, select:focus
{
border: 1px solid #4899BE;
}
We use the :focus
pseudo-class to give each field a blue border when it receives focus (again, a nice effect that Safari does by default). (Sadly :focus
isn’t supported by Internet Explorer on Windows. Oh well!)
Styling the form buttons
#buttons
{
text-align: right;
margin: -15px 0 -5px 0;
}
input.button
{
width: auto;
background: #FFFFFF;
border: 2px solid #4899BE;
}
Finally we style our buttons
div
(see below) so the the form control buttons are aligned right, and adjust the top and bottom margins so that the buttons are nicely spaced vertically in the form. Then we style the button itself with a normal (auto) width, a white background and a thick blue border.
Markup changes
We did cheat a bit and make a couple of changes to the form markup that couldn’t be made in the CSS:
<legend accesskey="B"><span style="text-decoration: underline;">B</span>illing details</legend>
<legend accesskey="S"><span style="text-decoration: underline;">S</span>hipping details</legend>
<legend accesskey="P"><span style="text-decoration: underline;">P</span>ayment details</legend>
We’ve added access keys for the “Billing details”, “Shipping details” and “Payment details” legends. When you press the access key for a legend, the browser usually gives focus to the first field in the fieldset that the label is attached to (“Name” or “Card number” in our case). Try it and see! We’ve also underlined the access key letter in each legend.
Here’s the end result again.
That’s it. Go forth and make beautiful forms!
Leave a Reply