[CSS] Customize your form with CSS

karinne · #1 Feb 7th, 2007, 13:33

Forms can be boring at times with their default styling, I agree. CSS comes to the rescue once again by spicing it up a bit.

A regular form
So ... lets start with coding our form

Code: Select all

<form action="dothis.php" method="post">

  <p><label for="name">Name:</label><br />
  <input type="text" name="name" id="name" title="Type you name" /></p>

  <p><label for="website">Website:</lable><br />
  <input type="text" name="website" id="website" title="Type in you website" />

  <p><label for="markup">Markup</label><br />
  <select name="markup" id="markup">
    <option value="html">HTML</option>
    <option value="xhtml">XHTML</option>
  </select></p>
    
  <p><label>CSS?</label><br />
  <input type="radio" name="yes"> Yes<br />
  <input type="radio" name="no"> No</p>

  <p><label for="description">Describe your site</lable><br />
  <textarea name="description" id="description" cols="30" rows="10"></textarea></p>

  <input type="submit" value="sumbit" name="submit" />
</form>

Here's what it would look like in your browser

form-1.jpg

CSS to the rescue!
If you've been playing around with CSS a bit you'll notice that you can do ALOT of nifty things with backgrounds and changing fonts (all the while using common fonts) and colors. Don't think that these changes stops at simple text withing div, span or p elements. Oh no my friend! You can style input elements with CSS just like anything else. So ... here we go!

input
We'll start by adding a border and a light background to the input elements in our form using CSS

CSS:

HTML: Select all

input {
  border: 1px solid #000;
  background-color: #ccc;
}

Nothing is to be changed in the form at all. Since we are using the "input" selector, it will make the changes to "all" input elements on our page.

Here's what this simple change do

form-2.jpg

You'll notice that the radio buttons didn't change at all even though they are "input" elements. Please see Ryan's article on Customize Checkboxes & Radio Buttons

select and textarea
To get the same look with the select and textarea element, we could do this in our css

CSS:

HTML: Select all

select {
  border: 1px solid #000;
  background-color: #ccc;
}
textarea {
  border: 1px solid #000;
  background-color: #ccc;
}

but why duplicate code. Let's save a few bytes and put it all in one like this

CSS:

HTML: Select all

input, select, textarea {
  border: 1px solid #000;
  background-color: #ccc;
}

Again, no changes need to be made to the html. Now we're getting somewhere. See what the form looks like now

form-3.jpg

karinne · #2 Feb 7th, 2007, 13:39

label
Those labels are kind of boring with the regulat text. Let's bold them up and change the font.

CSS:

HTML: Select all

label {
  font-family: Tahoma, Geneva, sans-serif;
  font-weight: bold;
  font-size: 14px;
}

Here's what the labels look like form-4.jpg Ahhh... much better.

That silly looking button
Now ... you may notice that the input button looks like those input boxes. Well... it should because it is an input element but ... it's not very distinguishable is it!? We'll fix that by changing the border, font and background color with CSS by creating a class for our button and applying it to our input.

CSS:

HTML: Select all

.submit {
  border: 2px solid #333;
  background-color: #862222;
  font-family: Courier New, Courier New, Courier, monospace;
  color: #fff;
}

Add the submit class to the input element in your html
HTML:

Code: Select all

<input type="submit" value="sumbit" name="submit" class="submit" />

And there we are form-5.jpg! Now that's a better looking form.

We're done

I hope this was helpfull to some. If you have any question about this tutorial feel free to PM me or reply here.

This was intended as a 2 parter so, hopefully I will have time to make part II which would talk about display, fieldsets and customizing that sumbit button with an image created in Photoshop.

Here is the complete HTML sources of the form

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-CA" lang="en-CA">

<head>

  <title>[CSS] Customize your form with CSS - part 1</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
  <style type="text/css">
  <!--
    input, select, textarea {
      border: 1px solid #000;
      background-color: #ccc;
    }
    
    label {
      font-family: Tahoma, Geneva, sans-serif;
      font-weight: bold;
      font-size: 14px;
    }
    
    .submit {
      border: 2px solid #333;
      background-color: #862222;
      font-family: Courier New, Courier New, Courier, monospace;
      color: #fff;
    }
    -->
  </style>

</head>

<body>

<form action="dothis.php" method="post">
  <p><label for="name">Name:</label><br />
  <input type="text" name="name" id="name" title="Type you name" /></p>

  <p><label for="website">Website:</lable><br />
  <input type="text" name="website" id="website" title="Type in you website" />

  <p><label for="markup">Markup</label><br />
  <select name="markup" id="markup">
    <option value="html">HTML</option>
    <option value="xhtml">XHTML</option>
  </select></p>
    
  <p><label>CSS?</label><br />
  <input type="radio" name="yes"> Yes<br />
  <input type="radio" name="no"> No</p>

  <p><label for="description">Describe your site</lable><br />
  <textarea name="description" id="description" cols="30" rows="10"></textarea></p>

  <input type="submit" value="sumbit" name="submit" class="submit" />
</form>

</body>
</html>

Stuart · #3 Nov 8th, 2007, 01:57

Thanks, Karinne! I use styled forms all the time, but the css is usually really complicated. This really helps as I can now detect a lot of redundancy in my code...

alexgeek · #4 Nov 8th, 2007, 07:20

+ rep. Why isn't this a sticky? Don't want to get lost amongst the other threads!

karinne · #5 Nov 8th, 2007, 12:09

It's fine in the Beginners' Resources threads ... that's what it is

Marc · #6 Nov 8th, 2007, 16:57

Nice one Karinne! I have seen a lot of these type of problems lately!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Let a user customize my layout..	jahphill	Web Page Design	1	Jun 6th, 2008 07:40
Hiding / Showing form fields based on previous form input	John Alexander Hopper	PHP Forum	1	Mar 10th, 2008 11:30
Try my new JavaScript: Customize Dropdown Menu	temp	JavaScript Forum	1	Aug 8th, 2007 11:47
How to customize content depending on URL?	matthewpage	Classic ASP	1	Nov 13th, 2006 04:50

		Webforumz.com > Main Forums > Design Your Website > Starting Out
[CSS] Customize your form with CSS