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.
[tut demo=”https://onextrapixel.com/examples/pure-css-form-styling/” download=”https://onextrapixel.com/examples/pure-css-form-styling/pure-css-form-styling.zip”]
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.
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.
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.
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.
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.
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.
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.
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.
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.
Kiev
A replacement for the standard checkbox that allows you to change the look of checkbox elements to an iPhone / iPod Touch like switch.
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.
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.
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.
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.
[tut demo=”https://onextrapixel.com/examples/pure-css-form-styling/” download=”https://onextrapixel.com/examples/pure-css-form-styling/pure-css-form-styling.zip”]
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.
