Learn How To Use Pure CSS To Style Web Form Dynamically.

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.

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.

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.

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.

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.

Demo | Download

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.