• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Web Development / CSS / Styling Forms with CSS

Styling Forms with CSS

22 November 2006 / Leave a Comment

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!

Filed Under: CSS Tagged With: cascading style sheets, css, fieldset, forms, input, label, legend, text fields, textarea

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

To include a block of code in your comment, surround it with <pre> ... </pre> tags. You can include smaller code snippets inside some normal text by surrounding them with <code> ... </code> tags.

Allowed tags in comments: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre> .

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits