Nice Form Fields
by: James Harvey

Well, I don't know about you guys, but I've gotten tired of the same old formfields in web-based forms. Yes While they do serve a good function (data input), I feel this is an occasion where function needs some form (pardon the pun).

First We're going to create our StyleSheet: sweet_forms.css:

/*Generic Select Fields*/
/* Add the background image and set the height of the image */
div.genericSelect {
background: url(../forms/generic_select.jpg) no-repeat scroll 0pt 100%;
height: 19px;
}
/* Set the opacity to 0 to make the options appear invisible, this allows the image to be visable */
div.genericSelect select {
opacity: 0;
filter: alpha(opacity = 0);
moz-opacity: 0;
width: 132px;
}
/* Tee text inside the box */
div.genericSelect .text {
float: left;
text-indent: 10px;
line-height: 19px;
width: 132px;
color: #28496C;
background-color: #f5f5f5;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
/* Shared font sizes */
div.genericSelect .text, div.genericSelect select option
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #f5f5f5;
background-color: #28496C;
}
textarea.generic_textarea {
width: 232px;
height:150px;
background-color:#FFFFFF;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
border-top: 0px solid #ffffff;
border-left: 0px solid #ffffff;
border-right: 0px solid #ffffff;
border-bottom: 0px solid #ffffff ;
}
/*Images Based Form Fields other than Select*/
/* Checkboxes */
label.checkbox_checked {
	background: url(../forms/checkbox_checked.png) no-repeat;	
	display: block;
	/*margin: 10px 0;*/
	/*padding-left: 5px;*/
}
label.checkbox_unchecked  {
	background: url(../forms/checkbox_unchecked.png) no-repeat;	
	display: block;
	/*margin: 10px 0;*/
	/*padding-left: 5px;*/
}

/* Radio Buttons */
label.radio_checked {
	background: url(../forms/radio_checked.png) no-repeat;	
	display: inline;
	/*margin: 10px 0;*/
	padding-left: 20px;
	padding-bottom:3px;
}
label.radio_unchecked  {
	background: url(../forms/radio_unchecked.png) no-repeat;	
	display: inline;
	/*margin: 10px 0;*/
	padding-left: 20px;
	padding-bottom:3px;
}
.inputField {
border-bottom: 1px solid #6c7a83;
border-top: 1px solid #6c7a83; 
width:112px; 
height:15px; 
border-left: 0px solid #6c7a83; 
border-right: 0px solid #6c7a83; 
font-size:10px;
font-family:Verdana, Arial, Helvetica, sans-serif; 
font-weight: bold; 
background-color:#FFFFFF;
}

/* Hover State */
label:hover{
	color: #294B6F;
}

label.highlighted {
	border: 1px solid #333;
}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* STOP EDITTING - DO NOT CHANGE OR REMOVE        */
.inputHidden {
	position: absolute;
	left: -1000px;
}
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

Now for the most part all the form fields use images. The Checkboxes and Radio Buttons use a JavaScript Handler (included in the zip file below) to render them properly.

Text Fields:		<table border="0" cellpadding="0" cellspacing="0" width="115"> <tr> <td><img name="index_r1_c1" src="assets/forms/text_field_left.jpg" width="10" height="19" border="0" id="index_r1_c1" alt="" /></td> <td><input type="text" name="analytics_key" type="text" class="inputField" /></td> <td><img name="index_r1_c3" src="assets/forms/text_fields_right.jpg" width="10" height="19" border="0" id="index_r1_c3" alt="" /></td> </tr> </table>

Text Areas:		<table border="0" cellpadding="0" cellspacing="0" width="250"> <tr> <td><img src="assets/forms/spacer.gif" width="9" height="1" border="0" alt="" /></td> <td><img src="assets/forms/spacer.gif" width="232" height="1" border="0" alt="" /></td> <td><img src="assets/forms/spacer.gif" width="9" height="1" border="0" alt="" /></td> <td><img src="assets/forms/spacer.gif" width="1" height="1" border="0" alt="" /></td> </tr> <tr> <td><img name="form_text_areacfm_r1_c1" src="assets/forms/form_text_area.cfm_r1_c1.jpg" width="9" height="11" border="0" id="form_text_areacfm_r1_c1" alt="" /></td> <td><img name="form_text_areacfm_r1_c2" src="assets/forms/form_text_area.cfm_r1_c2.jpg" width="232" height="11" border="0" id="form_text_areacfm_r1_c2" alt="" /></td> <td><img name="form_text_areacfm_r1_c3" src="assets/forms/form_text_area.cfm_r1_c3.jpg" width="9" height="11" border="0" id="form_text_areacfm_r1_c3" alt="" /></td> <td><img src="assets/forms/spacer.gif" width="1" height="11" border="0" alt="" /></td> </tr> <tr> <td><img name="form_text_areacfm_r2_c1" src="assets/forms/form_text_area.cfm_r2_c1.jpg" width="9" height="152" border="0" id="form_text_areacfm_r2_c1" alt="" /></td> <td valign="top"><textarea name="text_area" id="test_area" class="generic_textarea"> </textarea></td> <td><img name="form_text_areacfm_r2_c3" src="assets/forms/form_text_area.cfm_r2_c3.jpg" width="9" height="152" border="0" id="form_text_areacfm_r2_c3" alt="" /></td> <td><img src="assets/forms/spacer.gif" width="1" height="152" border="0" alt="" /></td> </tr> <tr> <td><img name="form_text_areacfm_r3_c1" src="assets/forms/form_text_area.cfm_r3_c1.jpg" width="9" height="12" border="0" id="form_text_areacfm_r3_c1" alt="" /></td> <td><img name="form_text_areacfm_r3_c2" src="assets/forms/form_text_area.cfm_r3_c2.jpg" width="232" height="12" border="0" id="form_text_areacfm_r3_c2" alt="" /></td> <td><img name="form_text_areacfm_r3_c3" src="assets/forms/form_text_area.cfm_r3_c3.jpg" width="9" height="12" border="0" id="form_text_areacfm_r3_c3" alt="" /></td> <td><img src="assets/forms/spacer.gif" width="1" height="12" border="0" alt="" /></td> </tr> </table>

Select Fields:		<div class="genericSelect"> <select name="your_select" id="your_select"> <option>Your Select Box</option> <option value="1">Value 1</option> <option value="2">Value 2</option> <option value="3">Value 3</option> <option value="4">Value 4</option> </select> </div>

Radio Buttons & Check Boxes: Don't forget to include the javascript file, otherwise they won't work.		Checkboxes: <input name="checkbox" id="checkbox" type="checkbox" value="1" class="inputHiddenJS" /> <label for="checkbox">Value 1</label> <input name="checkbox" id="checkbox2" type="checkbox" value="2" class="inputHiddenJS" /> <label for="checkbox2">Value 2</label> Radio Buttons: <input name="radio" id="radio" type="radio" value="1" class="inputHiddenJS" /><label for="radio">Yes</label> <input name="page_in_menu" id="radio2" type="radio" value="0" class="inputHiddenJS" /><label for="radio2">No</label>

Download the ZIP FILE (288KB) containing all the sourcefiles, images and examples!
Do Enjoy!

-James