A Sneak Peek Into Building Responsive CSS3 Form Fields

With the mobile-internet era showing no signs of fading away in the near future, it has actually been noticed that designers and developers are focusing their attention on creating websites that are friendly with the mobile phones. Websites that expect visitors to fill in a registration form, application form etc. require a high-level of designing expertise. If you are a designer then you must be absolutely familiar with the task of designing forms for the smaller screens too. Whether it’s about designing a login form or a shopping cart form; offering a great user experience should be on your mind. With CSS around, you don’t need to worry because the web design tool allows you to build fully-functional forms/form fields that look consistent through the website. In this blog, I’ll be throwing some light on creation of fully-responsive and visually enchanting form fields using CSS.

Why designing forms/form fields with CSS is a brilliant option?

If you are looking for creating beautiful and easy-to-use forms then CSS is definitely a must-try. Despite spending multiple hours on ensuring an intuitive user interface for your website, a little negligence on the part of creating forms can lead to inconsistency within the entire websites. With CSS, it is quite simple to apply specific styling to individual HTML form fields including


text-areas, inputs and many more.

CSS3 comes with ample number of options for building unique interfaces that include drop shadows, gradients, rounded corners and a lot more. With a growing demand for these effects in every web development project, it is actually the best decision to choose CSS3 for creating forms.

Now, let’s get started with the steps that form the basis of form creation using CSS:


Step 1- Set up a local HTML5 page:

As the very first step, you need to set up a local HTML5 page that’s equipped with an external CSS file called styles.css. You can choose Switchery- an impressive open source JavaScript library that works best for creating iOS-style ON/OFF switches. Here is the code involved with the same:

<!doctype html>
<html lang="en-US">
 <meta charset="utf-8">
 <meta http-equiv="Content-Type" content="text/html">
 <title>Horizontal Application Form - Template Monster Demo</title>
 <meta name="author" content="Jake Rocheleau">
 <link rel="shortcut icon" href="http://static.tmimgcdn.com/img/favicon.ico">
 <link rel="icon" href="http://static.tmimgcdn.com/img/favicon.ico">
 <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
 <link rel="stylesheet" type="text/css" media="all" href="css/switchery.min.css">
 <script type="text/javascript" src="js/switchery.min.js"></script>

Step 2- Make tweaks to the CSS Design:

As an attempt to improve the CSS, you can opt for changing the colors and updating the input fields. Here’s a look at how you can tweak the CSS design in order to make the white background look and feel like a flat paper, instead of a digitally textured surface:

form {
 display: block;
 margin: 20px;
 overflow: hidden;
 background: #fff;
 border: 2px solid #e4e4e4;
 border-radius: 3px;
 font-size: 0;
form > div > label {
 display: block;
 padding: 20px 20px 10px;
 vertical-align: top;
 font-size: 11px;
 font-weight: bold;
 text-transform: uppercase;
 color: #838383;
 cursor: pointer;
form > div.switch > label {
 padding: 14px 21px 12px;
.col-2, .col-3, .col-4 {
 border-bottom: 1px solid #e4e4e4;
form > div > .col-4 {
 height: 84px;
label > input {
 display: inline-block;
 position: relative;
 width: 100%;
 height: 24px;
 line-height: 17px;
 margin: 5px -5px 0;
 padding: 4 px 4px 5px;
 border: none;
 outline: none;
 color: #444;
 font-family: 'Helvetica Neue', Arial, sans-serif;
 font-weight: bold;
 font-size: 16px;
 opacity: .4;
 transition: all linear .2s;
.col-submit {
 text-align: center;
 padding: 22px;
label > select {
 display: block;
 width: 100%;
 padding: 0;
 color: #444;
 margin: 15px 0 6px;
 font-weight: 300;
 background: transparent;
 border: none;
 outline: none;
 font-family: 'Helvetica Neue', Arial, sans-serif;
 font-size: 12px;
 opacity: .3;
 transition: all linear .2s;
label > input:focus, label > select:focus {
 opacity: 1;

If you carefully observe the above code, you’ll find that each column class is set up on the div items for describing the size of content, with no distinction between individual rows.

Step 3- Create the iOS switches

Assuming that by now you’d have included the Switchery CSS and JS files, you need to include the below mentioned code snippet for creating the iOS-style switches:

var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
elems.forEach(function(html) {
 var switchery = new Switchery(html);

Referring to the above code, the elems variable is using .querySelectorAll for matching every element via the relevant switch class called .js-switch. After this, there’s a forEach() loop that runs through all the selected elements. Finally, there is a html parameter that’s applied to the Switchery method.

Wrapping it all up:

So, that was all about using CSS for creating forms/form fields which look great and function brilliantly. In order to make your website stand out from the crowd, it is absolutely essential to ensure that the forms incorporated within it work flawlessly on all devices with smaller screens and lesser resolutions. I’m sure you’d have followed the steps covered above and would follow the same for expanding the design qualities of your web forms and the fields that need to go into the same.

About amy-brown

Amy Brown is a WordPress developer by profession and a writer by hobby. She works for WordPrax Ltd.- Custom WordPress Development Company with a global reach. In case, you have made up your mind on creating a custom plugin, hiring the experts would make for a wise decision.

Related posts:

One thought on “A Sneak Peek Into Building Responsive CSS3 Form Fields

Leave a Reply

Your email address will not be published. Required fields are marked *