Picment.com

By Søren Madsen

Ever wanted to match the look of your HTML forms with the rest of your website? This article demonstrates how to apply customized backgrounds to HTML forms, while preserving stucturally clean markup and accesibility.

A few considerations before we begin

Before you throw yourself at this, there are some important considerations you have be aware of.

Usability

Users trust their credit card and personal information with forms on the internet, and that trust is sacred. So changing the appearance of well-known and recognizable browser elements like the basic input elements, may therefore not always be advisable. If you know your audience well enough, and you're confident that changing the appearance of form elements won't confuse or distract said audience from ie. an online purchase, please read on.

Differences in user agents

The techniques we're about to demonstrate are not generic. Form elements are "replaced elements", which means they come directly from the heart of your OS, and not the browser itself. The CSS specifications do therefore not require that form elements should be able to receive styling.
Most popular browsers have however provided us with options to do so, but not all of them. In fact, the following won't work at all in browsers like Safari , since eg. Safaris form elements are tied closely to the Mac OS presentation system, and therefore doesn't allow styling form elements much more than basic height and width. (Update: The following technique does indeed work in the new Safari 1.2 - Argh, I received contradictory reports! No, it doesn't)
So what are we left with? Well — from what yours truly has been able to test, the following works in IE5+, partially in Opera, and gecko-based browsers (Netscape, Mozilla/Firebirdfox).

Logical restrictions

With this technique, we basically hide the given form element, and replace it with graphic backgrounds. Since that doesn't really make sense with all form elements like select, file fields, radio buttons and check boxes due to their behaviour and functions, I've restricted the scope of this article to work with input fields, text areas and submit buttons, and if you're fine with that — by all means, read on.

Some form basics

– the <fieldset> and <legend> elements

The fieldset element functions as a structural container for different sections within a form element. An example would be an order form, which is divided in several structural sections, such as personal information, credit card information and shipping information — but all part of the same form element. To provide meaningful structure between these sections, you would use the fieldset element. The legend element provides a feature to give each of these fieldset groupings a caption/title. Here's what it might look like:

<form method="post" action="handle.ext">
<fieldset>
<legend>Personal information</legend>
input fields here ...
</fieldset>
<fieldset>
<legend>Credit card information</legend>
input fields here ...
</fieldset>
<fieldset>
<legend>Shipping information</legend>
input fields here ...
</fieldset>
<fieldset>
submit/reset buttons here ...
</fieldset>
</form>

Note that the legend element is optional.

– the <label> element

Some form elements have an implicit labelling feature, like the value attribute of submit buttons — but most do not. The label element attaches descriptive information to form elements like input fields, radiobuttons, textareas etc. The label element also provides interactivity by focusing/selecting the form element it describes, when it is clicked on with the mouse.
One or more label elements can be attached to a given form element with the labels for attribute.

<label for="tf1">Name: </label><br />
<input type="text" id="tf1" value="" /><br />
<label for="tf2">Email: </label><br />
<input type="text" id="tf2" value="" />

Choose <label for="rb1">Yes</label> 
or <label for="rb2">No</label>:<br />
<input id="rb1" name="nlrb" type="radio" value="yes" />
<label for="rb1"> Yes</label><br />
<input id="rb2" name="nlrb" type="radio" value="no" />
<label for="rb2">No</label>

The HTML above produces the following result:

Name:

Email:

Choose Yes or No:
Yes
No

Notice that, by clicking the assigned labels, the appropriate form element is focused/selected - try it out! The labels can be placed anywhere - try choosing Yes or No right here.

Styling the contact form

For this article, let's do something fairly simple and often needed, the contact form.

<form action="default.asp" method="post">
<fieldset>
<legend>Contact form </legend>
<label for="name">Name:</label><br />
<input type="text"  id="name" name="name"  />
<br />
<label for="email">Email:</label><br />
<input type="text" id="email" name="email" /><br/>
<label for="website">Website:</label><br />
<input type="text" id="website" name="website" value="http://" />
<br />
<label for="comment">Comment:</label><br />
<textarea cols="30" rows="15" name="comment" id="comment">
</textarea>
<br /><label for="submit">&nbsp;</label><br />
<input id="submit" name="submit" type="submit" value="submit" />
</fieldset>
</form>

• See step I — primary markup

First step - positioning the elements

Guess what? We received an email from our graphic designer again. He attached an illustration and wrote:
“We have a client whose wife told him that everything we'd done with his new website was just dandy; except for that contact form. She hated that. So the client asked whether it would be possible to do something about those standard boring form elements? I told him I'd look into it ... sigh. You told me you like challenges, so what do you say? Can you make the contact form look something like the illustration I attached?”

“Sure! I'll get back to you” I replied, while biting my lips.

Our basic form in step 1 works well, and makes sense in all its non-styled glory. The labels are followed by a <br />, so everything's lined up nicely - line by line. But in the illustration we were sent, the labels are positioned to the left of the assigned input field; almost like a column. We'll solve that by assigning the <br />'s we do not want to affect our layout a class <br class="nobr" /> — and that class simply specifies display:none;.
To give our labels the column behaviour, we give them a shared width, float them to the left, and right align them. Here is what we have so far; general design parameters and a primary layout for the form:

body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:60%;
	margin:50px;
	color:#666; }
.fieldset {
	width:300px; }
.fieldset .label {
	text-align:right;
	width:70px;
	float:left;
	padding:0.2em;
	margin:0;
	margin-top:0.3em; }
.fieldset .nobr {
	display:none; }  
.fieldset .textfield {
	margin:3px;
	height:20px;
	width:200px; }
.fieldset .textarea {
	margin:3px;
	height:165px;
	width:200px; }

We've obviously also assigned class names to the elements we want to target with CSS. Don't trust us; See for yourself:

• See step II — Basic layout and structure

Next step — "hiding" the respective form elements

So far so good. What we want to do now, is hide the input and textarea elements. Well; not excactly hide, but for this exercise, we don't want to keep anything other than their functionality (areas to fill in text) — and then we'll decide what their graphical manifestation will be, by the use of background images. In this case; easier done than said, but this is also where our crossbrowser compliancy stops. We've been able to confirm that the following trick works in IE5+, Opera(?) and Gecko based browsers(?), but not in eg. the popular Safari browser for Mac, sorry.
The trick is really simple actually. It turns out that it takes nothing more than a border:solid 0 #fff; applied to the input elements, will hide their manifestation - but not their functionality. The color you specify for the border could be a flaming pink for what it matters, but it doesn't really matter - it won't display. See the following — the fields are there, you just can't see them:

• See step III — Input fields are "hidden", except for their functionality

Third step — placing background images in the input elements

Placing background images in the input fields, works just like it normally does, with one small exception we'll get back to. The CSS for our .texfield class looks like this for instance:

.fieldset .textfield {
	margin:3px;
	height:20px;
	width:200px;
	border:solid 0 #fff;
	background: transparent 
	url("graphics/textfield_bg.gif") no-repeat; }

See what it looks like:

• See step IV — input elements with backgrounds replaced with images

Looks nice, eh? We obviously have to add some padding to our input and textarea elements, and we'll get back to that — but right now that's not our biggest concern.

Fourth step — dealing with a few browser differences

If you're viewing this article in IE5+ on Windows, you'll notice that the background images in step 4 start scrolling once the input fields are filled up with text. In other browsers the background images stay in place. We don't want that to happen, so we asked ourselves: “What happens if we add fixed to the background rule?” Well — it did the job solving our problem in IE5+, but caused even bigger problems in other browsers like Mozilla Firefox, because the background images becomes absolutely fixed. So what we'll do, is mix the two solution we now know works in different browsers:

.fieldset .textfield {
	margin:3px;
	height:20px;
	width:200px;
	border:solid 0 #fff;
	background: transparent 
	url("graphics/textfield_bg.gif") no-repeat fixed; }
fieldset>input.textfield {
	background: transparent 
	url("graphics/textfield_bg.gif") no-repeat; }

IE5+ doesn't get the fieldset>input.textfield selector, but other browsers do, so within that selector we'll hide rules from IE5+.

And that was pretty much it! The final layout is available below. Adding padding to our input elements, triggered the usual box model problems, so the Tantek box model hack is used to feed appropiate width values to different browsers - but besides that, the remaining new rules are general styling parameters like font-size and color, and some excessive styling of the legend element, that you may disregard. View the source for details on the finished layout:

• See step V — The final result

Final thoughts

We sincerely hope this article inspired you / gave you ideas on how to customize the layout and appearance of your online forms. We' do however stress the points raised in the beginning of this article - the considerations about usability and browser differences. Input elements are very hard to style, because todays browsers handles these elements very differently, but if the scope of browsers that this technique was written for, is satisfactory to you, we're glad we could help!