Styling Forms with CSS
HTML forms are probably one of the ugliest things to hit the web. They are generally boring and utilitarian and don't offer much in the way of good looks. But with CSS, that can change. Combining CSS with the more advanced form tags can get you some really nice looking forms.
Chances are you will have at least one form on your web site. It may be a simple form where your visitors sign up for a newsletter, or it may be a more complex form such as a customer help or feedback form. Since forms are composed of common HTML tags, it is possible to change their default appearances using CSS. Some common form tags are <form>, <input>, <select>, and <textarea>.
Part 1
Below is a typical form that has no styling applied. The screenshot below shows how the form renders in IE7 Windows XP (sorry, it is an older screenshot):
Here's the code behind it:
<form method=post" action="#">
<label for="name">Name: </label>
<input type="text" name="name" /><br />
<label for="email">Email: </label>
<input type="text" name="email" /><br />
<label for="choice">Select One: </label>
<select name="question">
<option>Presales Question</option>
<option>Support Question</option>
</select><br />
<label for="comments">Comments: </label>
<textarea rows="4" name="comments"></textarea><br />
<input type="submit" value="submit" />
<input type="reset" value="reset" />
</form>
In the code example above, the <label> tag is used for accessibility reasons. It is important for your visitors to know what a particular field is for, especially for those with screen readers. A bonus is that the label tag can be styled so you no longer have to place your form into a table to keep items aligned.
Part 2
By styling the <label> tag as follows:
label {
width: 120px;
float: left;
text-align: right;
margin: 0 10px 10px 0;
clear: both;}
Our form now looks like this:
In the form example above, you can see that the form contains several different <input> tags. To separate the style of an input text field from an input button field, you can create contextual selectors and then apply the class to the individual input fields as needed.
Part 3
You can style input tags as shown below:
input.text {
color: #000000;
background-color: #b6c8da;
padding: 2px;
border: 1px solid #606060;
width: 200px;}
input.btnsubmit {
font: bold 14px Verdana;
color: #ffffff;
background-color: #6090b0;
border: 1px solid #808080;
padding: 5px;
margin: 10px 10px 0 130px;}
input.btnreset {
font: bold 14px Verdana;
color: #ffffff;
background-color: #6090b0;
border: 1px solid #808080;
padding: 5px;
margin: 10px 10px 0 0;}
Below is an example of the styled form and the HTML coding:
<form method="POST" action="#">
<label for="name">Name: </label>
<input type="text" name="name" class="text" /><br />
<label for="email">Email: </label>
<input type="text" name="email" class="text" /><br />
<label for="choice">Select One: </label>
<select name="question">
<option>Presales Question</option>
<option>Support Question</option>
</select><br />
<label for="comments">Comments: </label>
<textarea rows="4" name="comments"></textarea><br />
<input type="submit" value="Submit" class="btnsubmit" />
<input type="reset" value="Reset" class="btnreset" />
</form>
Part 4
You can also style the <select> and <textarea> tags as shown in the example below:
select {
color: #000000;
background-color: #b6c8da;
padding: 2px;
border: 1px solid #606060;
width: 200px;}
textarea {
color: #000000;
background-color: #b6c8da;
padding: 2px;
border: 1px solid #606060;
width: 200px;}
By adding these styles, your form now looks like the following:
Part 5
You can also replace the form's usual submit button with an image. Warning: you cannot have both a submit button image and a reset button image. Using an image will cause the reset button to also submit the form in Internet Explorer. If your form is small, you may decide that a reset button is not necessary.
You can replace the submit portion of your form:
From this:
<input type="submit" value="Submit" class="btnsubmit" />
<input type="reset" value="Reset" class="btnreset" />
To this:
<input type="image" src="button-submit.jpg" value="Submit" alt="click to submit form"
class="btnsubmit" />
Adjust your CSS styles as follows:
From this:
input.btnsubmit {
font: bold 14px Verdana;
color: #ffffff;
background-color: #6090b0;
border: 1px solid #808080;
padding: 5px;
margin: 10px 10px 0 130px;}
To this:
input.btnsubmit {
margin: 10px 10px 0 130px;}
NOTE: Since the reset styling is not being used, you may delete it.
Your form will now look like the sample below:
