How To Use Pure CSS To Style Web Form Dynamically Plus 12 Awesome JavaScript Plugins

by in Tutorials on 25th Aug 2009 · Comments

Everybody knows about web forms and it has fast becoming part of our daily online interaction. Everyday we will need to enter some sort of information into a web form, whether it's a simple login to your web-mail account, an online purchase, or signing up for a website. These are the basic, and pretty much the effective way of gathering information on the web.

Web application interface designs have evolved over the years, from the default browser style to having rich colour palettes design and dimensional background images. We have to thank the adoption of web standards and advanced CSS techniques for such improvements.

Normal default web form elements look ugly and unprofessional. Nowadays, as web design require every element to glue together as a whole, we cannot leave the web form to their default style. In order to achieve that, we can use a very simple way which is CSS to change your form appearance.

Pure CSS Form

How To Skin A Web Form With Pure CSS

Pure CSS styling of web form can be achieve by changing the border colour or background colour but how about styling a textfield and textarea with a nice round corner background image?

Let's use a contact us form as an example to demonstrate this tutorial. This simple tutorial will show you how you can style your textfield and textarea in you web form with background image dynamically.

1. Extend Your Textfield Background Wider

You will need to create a background image for your textfield with a wider width, so that it can cater to a longer width textfield if you need to extend at a later stage.

Long Textfield

2. Create Your Web Form Markup

In the HTML below, it's the normal form markup. Just one thing to take note, which is the span class that wrap around the textfield and the textarea. This span class is use for extending the left corner of the background image for the textfield.

<form action="#" method="post">
	<ul id="contactform">
		<li>
			<label for="name">Your Name*</label>
			<span class="fieldbox"><input type="text" name="name" id="name" value=""/></span>
		</li>	
		<li>
			<label for="email">Email*</label>
			<span class="fieldbox"><input type="text" name="email" id="email" value=""/></span>
		</li>
		<li>
			<label for="contact">Contact No.*</label>
			<span class="fieldbox"><input type="text" name="contact" id="contact" value=""/></span>
		</li>
		<li>
			<label for="msg">Message</label>
			<span class="msgbox"><textarea class="area" id="msg" name="msg" rows="8" cols="30"></textarea></span>
		</li>
	</ul>
			
	<p>required field*</p>
	<input type="submit" value="Send" id="sendbutton" name="sendbutton"/>
</form>

3. Style The Form With CSS

Once we have the markup ready, we'll start off with the normal form styling. Give a display:block; for the label to flush the textfield and textarea to the next line. The rest are some padding and margin alignment.

label {
	display:block; 
	padding-bottom:5px; 
	margin-top:20px;
}

#contactform {
	width:900px; 
	overflow:hidden;
}

#contactform li {
	list-style:none; 
	padding-bottom:20px;
}

Now, let's move on to styling of the textfield. As you know we can simply give a fixed width and height properties to the textfield and set the background image, a nice looking textfield appear.

However what happened if you need to change the width? Are you going to go through the hassle of slicing your textfield background again? So in order to solve this problem of re-slicing the textfield background, we will have to make it dynamic, the CSS code below shows you how you can do it.

//Textfield style 
#contactform li .fieldbox {
	background:transparent url(images/subfield.jpg) no-repeat top left; 
	float:left; 
	height:27px; 
	padding-left:5px;
}

#contactform li .fieldbox input {
	background:transparent url(images/subfield.jpg) no-repeat top right; 
	height:27px; 
	padding-top:5px;
	width:400px;
}
//Change the width of the contact no. field
#contactform li .fieldbox #contact {
	width:200px;
}
//Textarea style
#contactform li .msgbox {
	background:transparent url(images/msgfield.jpg) no-repeat top left; 
	float:left; 
	height:110px; 
	padding-left:5px;
}

#contactform li .msgbox textarea {
	background:transparent url(images/msgfield.jpg)  no-repeat top right ; 
	height:110px;
	padding-top:5px;
	width:500px;	 
}
//Button Style
#sendbutton {
	background:#acb4cb; color:#fff; 
	cursor:pointer;
	padding:5px 10px; 
	-moz-border-radius:4px;
	-webkit-border-radius:4px
}

In the above CSS code, we have the #contactform li .fieldbox which is the span class to have the background image, and float it to the left. After adding padding-left:5px; you will be able to see the tiny left round corner of the background image.

Next, we will have the the same background image apply to the #contactform li .fieldbox input selector with a width. Now you can change the width of your design textfield background image just by changing the value without re-slicing any image.

4. End Result

You might want to try using Firebug to change the width of the textfield to see how the background image of the textfield reacts.

Pure CSS Web Form

Above is a simple example on how you can style a form just by using CSS. However when it comes to more advance form styling, like checkbox or radio button inputs to match a custom design, it's nearly impossible to do it because they do not support basic CSS, like background colours or images. In order to do that, you will actually need the help of JavaScript.

JavaScript Plugins That Can Help You Skin Your Web Form

Each of the JavaScript plugins below has the ability to redesign your form style. It is now possible to skin the web form with unique and creative design with the help of any of this plugin.

Web Form Element Skinning

Custom Form Elements
CFE currently supporting Mootools and jQuery JavaScript Framework. It can be the form library that fits your needs. In fact it is highly customizable, which even allow you to style the file upload, select and any type of buttons plus all other form elements with CSS and still maintain the usability and accessibility of every form element. Best thing is it doesn't interfere with other JavaScripts like form validation.

Custom Form Elements

jqTransform
jqTransform is a jQuery styling plugin which allows you to skin your form elements. It's clean and simple to use, just add a JavaScript inclusion of this plugin in the header section, then attach class="jqtransform" to your form and you are all set to do your styling.

jQuery jqTransform

Niceforms
Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.

What it does is parses the DOM tree, gets all the input fields, hides them, and positions their new graphical appearance in place. All this is done while preserving the date transfer and selection features of the regular form. Everything is done via JavaScript.

Niceforms

Check Box And Radio Button Replacement

Pretty Checkboxes with jQuery
Aaron is a New England based web designer, he was working with a project where form checkboxes were required, but the standard UI would not do. So below is something he came up with.

Pretty Checkboxes with jQuery

Check Box and Radio Button Replacement
CRIR allow us to style the label however you wish using CSS, and the actual input control will be hidden. The form will still collect data as it normally would because the label itself will trigger the hidden input control. If javascript is disabled no inputs will be hidden and the form is still be fully functional.

Check Box and Radio Button Replacement

prettyCheckboxes
This script is for people who wants to have a consistent look for checkboxes across browser or those who simply want them to look better. By using this script you wont loose any of the regular inputs usability.

prettyCheckboxes, A Solution to Checkboxes

Filamentgroup
Filamentgroup ensure that the widget works even when images don't load. Instead of positioning the input off the page, they have positioned it directly behind the styled label, so if the label's background image fails, the input remains visible.

Designed Checkbox & Radio Button Inputs Style

Kiev
A replacement for the standard checkbox that allows you to change the look of checkbox elements to an iPhone / iPod Touch like switch.

iPhone Style Checkbox & Radio Button

Lipidity Fancy Form
FancyForm is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements. It's accessible, easy to use and degrades gracefully on all older, non-supporting browsers.

Lipidity Fancy Form

jQuery UI: Radio Button and Check box Replacement
By using jQuery UI, accessible radio button and checkbox replacement plugin replace radio buttons and check boxes with a more skinable version.

jQuery UI: Radio Button and Check box Replacement

File Input Styling

Quirksmode
Michael McGrady invented a very neat trick that allows us to (more or less) style file upload fields. But Quirksmode added the position: relative, a few notes and tests, and ported it entirely to JavaScript.

Style An Input Type File

File Style
File Style wraps vanilla file input with div tag. This div tag has button as background image and the image button is aligned with file inputs browse button. File input is then hidden by setting opacity to zero. Chosen file is shown in normal text input which mimics file input.

jQuery File Style

Conclusion

From the plugins above, you can now extend the web form design beyond the traditional web form default style. If there are more plugins that can help with the styling of the web form, please feel free to add them in the comment below.

Terrance is a versatile web developer and the technical editor at OXP. He enjoys creating functional websites and is particularly engrossed in all the tiny details mixed together to construct great user experiences. He always believe that every web user deserves the best!