Web Developer Class: Creating Forms with CSS3

You only have to look as far as Twitter’s relatively new interface to see that stylized text boxes are still a popular design choice for input fields and forms. When a visitor clicks on a form field, visual clues letting them know which box they are about to type in are handy and helpful effects. There are a few different techniques to create styled forms and input fields using CSS3.

To start, you’ll probably want very slightly rounded corners. For a while, it was popular to design boxes and fields with nearly circular edges, but a more subtle look tends to be favored these days. Second, it’s nice to include a slight color gradient in the input field to provide some depth. Third, adding a highlight effect to the text box is a nice visual indication to the visitor that a particular box is selected. Last, and probably least, I’ll provide some code that actually slightly enlarges the text field when the visitor clicks on it for Chrome users.

When you use this code for your own site, you’ll most likely not want to use all of these features, and you’ll most definitely want to tweak it to suit your site.

Let’s begin with the HTML:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title>CSS3 Forms</title>
<link rel=”stylesheet” href=”css/CSS3.css” type=”text/css” />
</head>
<body>
<div class=”wrapper”>
    <h2>Sample Input Fields</h2>
    <form id=”form” action=”” method=”” name=””>
   	 <label for=”input-1″>Name</label>
   	 <input type=”text” name=”input-1″ id=”input-1″ />
   	 <label for=”input-2″>E-mail</label>
   	 <input type=”text” name=”input-2″ id=”input-2″ />
    	 <input type=”submit” name=”submit” id=”submit” value=”Submit”>
    </form>
</div>
</body>
</html>

Now let’s break down the CSS3 code. I’m going to skip the body, wrapper and form label formatting and go straight to the good stuff.

form#form input#input-1, form#form input#input-2 {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
	background-color: #eaeaea;
background: -moz-linear-gradient(top, #ffffff, #eaeaea);
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, 			#ffffff), color-stop(1.0, #eaeaea));
    	border: 1px solid #cacaca;
    	color: #444;
    	font-size: 1.4em;
    	margin: 0 0 25px;
    	padding: 8px 10px;
    	width: 240px;
}

That takes care of the two input fields. Using 5px for the rounded corners provides a subtle look that you might be aiming for. If you desire more pronounced curves, then you can increase the px to any variant that you like. You can also specify unique curves for each corner as well by indicating bottom-left, bottom-right, etc.

Here’s some example code for the Submit button:

form#form input#submit {
-moz-border-radius: 32px;
    	-webkit-border-radius: 32px;
    	background-color: #dedede;
    	background: -moz-linear-gradient(top, #ffffff, #eaeaea);
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, 			#ffffff), color-stop(1.0, #dedede));
    	border: 1px solid #dedede;
    	color: #484848;
    	font-size: 1.25em;
    	font-weight: bold;
   	padding: 10px 15px;
}

The -moz- takes care of the rounded corners for Firefox browsers and the -webkit- handles the rounded corners for Google Chrome.

Now let’s take things a couple of steps further and add in the visual effects for when a visitor clicks on the input field.

input:focus, textarea:focus {
    -webkit-box-shadow:0 0 25px #ccc;
    -moz-box-shadow:0 0 25px #ccc;
    box-shadow:0 0 25px #ccc;
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    transform: scale(1.05);
}

Adding this to your CSS3 provides the shadow, or glow effect around the text box when the visitor clicks on it.

Now for that extra bit of formatting:

input, textarea {
    font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
    background-color:#fff;
    border:1px solid #ccc;
    font-size:20px;
    width:100px;
    min-height:20px;
    display:block;
    margin-bottom:16px;
    margin-top:8px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

Have a look at

all this code in action

For Chrome, this code adds a transitional effect, which you might find unnecessary and visitors might find cute at first but perhaps slightly annoying after several clicks. As always, it’s up to you on what you want to implement for your site and how you design your pages. Hopefully, this code moves you further along.

Web Developer Class: Creating Forms with CSS3

Michael Rohde

Recommended for you...

Company

Categories