Basic Pure CSS3 Form Styling. No JS Required.

Basic Pure CSS3 Form Styling. No JS Required.

Pure CSS3 form styling is becoming more popular. It has its drawbacks, but the increased loading time from the traditional JS overlay is wasted tenths of seconds when talking about optimizing to maximize for your entire audience. Most forms are fairly straight forward and only utilize inputs and text areas rather than radios and check boxes which create their own challenge.

The example code below is just a small sampling of what you could do. Don’t be afraid to add background gradients or color to your form. I focus on a standard gray look for most elements because it satisfies a wider audience than being color specific. You can play around with the shadow and the background color to add a completely different look to your website. If you have a dark website, I suggest swapping the CSS form code to blend and pop on a dark background. Just add this CSS to your style sheet to instantly style any form.

 

input {
    padding: 10px;
    -webkit-border-radius: 4px;
    -khtml-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 5px #444;
    -moz-box-shadow: 0 0 5px #444;
    box-shadow: 0 0 3px #444;
    border: 1px solid #fff;
}

textarea {
    padding: 15px;
    border: 1px solid #fff;
    -webkit-border-radius: 4px;
    -khtml-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 5px #444;
    -moz-box-shadow: 0 0 5px #444;
    box-shadow: 0 0 10px #444;
}

input[type="text"]:hover, textarea:hover {
    border: 1px solid #233567;
}

Default Form with no CSS. It looks like a pretty boring form to me!

First name:

Last name:

Now if we added the CSS, we can really enhance the overall look of the form. This form is a lot more exciting! It gives a more updated and modern feel with the rounded corners, the gentle shadowing, and the padding that gives a bigger impression. This form style fits for a lot of websites, but it definitely doesn’t fit for every website. I hope you enjoy customizing this form to your taste.

First name:

Last name:

The CSS on the form makes a big impact to your web appearance. If you are interested in enhancing your form further, you can customize with other properties that you find in the tutorials on here: background color, gradient, padding, or even an image, but I think you will be satisfied just by adding a little CSS to your stylesheet.