CSS Forms

The following pages look at how we can apply CSS to forms in order to change the way that our form fields work. In each case the page includes example CSS and shows you how it looks when applied to form fields. At the time of writing there may still be a few people using browsers that do not fully support some of these examples so you'll be able to easily see for yourself where this applies simply by looking at these examples in different browsers. Where the code doesn't work the form should still be functional just not quite looking the way you wanted.

  1. Styling Form Fields
    To start off this series we look at one of the simplest changes you can make to your form field appearance - to change the text and background colour of the form fields.
  2. Input Field Borders
    The most complicated part of being able to style form field borders was resolved once browsers understood CSS targetting attributes.
  3. Active Form Fields
    Some browsers clearly identify which form field currently has the focus. Here's how we can make sure that all do.
  4. Styling Submit
    There are three different ways we can create submit buttons and ways to style all of them.
  5. Styling Checkboxes and Radio Buttons
    Substituting a character or image for the button is easy in modern browsers..
  6. Fieldset and Legend
    We need to be a bit careful with styling these as not all browsers position the background relative to the top border the same way.
  7. Aligning Labels
    There is more than one spot where you can place the label.
  8. Styling File Inputs
    To style these we need to hide the actual field and display what we want in its place.

go to top

FaceBook Follow
Twitter Follow