Simple CSS Style for Web Forms

Looking at a large CSS property all at once can seem a bit daunting.  I am sure that many people have taking a look at someone’s style sheet and been so discouraged and dismayed as to believe “I could never do anything like that!”

But the trick to CSS is to address it the same as any other computer script, a line at a time.  In this post, Simple CSS Style for Web Forms we will start to style our the Email Form we created in Forms for Websites ~ A Template for HTML5 or WordPress

As you may recall, we left that project with the HTML5/XHTML code finished and looking rather like this:

A Div Wrapper & Form

<div id="tukod-form-one">
  <form action="">

The first thing we encounter is the div wrapper, we use this to set us apart from any other form there is on the page. WordPress often adds search engine boxes and sometimes other forms. We give the div an id=”tukod-form-one” which allows us to quickly access our special css just for this form.

That leads us to the form element itself. We will start by piecing together the CSS for the form element.

/* Working Code - #tukod-form-one */
#tukod-form-one form {
/* Million System Specificity = 1,000,001 */

In the first line I have written myself a note (comment). I strongly advise you to comment your code – later you may want to change something and this can give you many clues. Here I just tell what this is for.

The next line shows what we are styling, a form with the ID=tukod-form-one

This may be a little slow at first, but if you are an advanced user feel free to skip ahead – I will put the completed css at the end.

The third line shows the CSS Million System Specificity for this property.  This is useful to know.  You can learn how to get this number at the CSS Million System and learn how to use it at  Why My CSS Works!  I highly advise everyone to use the CSS Million System as it is a great time saver.

A Shady Background

background: -webkit-gradient(linear, bottom, left 175px, from(#CCCCCC), to(#EEEEEE));
background: -moz-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);

I am not talking about a person with a criminal past (A Shady Background).  I just think flat colors are really boring, adding a little gradient can break up the monotony and give your design some dimension.  That is what we are doing here with the background style.

WebKit and Moz

A word about webkit and moz – these are stable but not yet in any working standard.  Basically you have three “layout engines” in use in browsers…

The most popular is -webkit, it powers the Safari and Chrome web browsers.

The Gecko layout engine is also well known and is a preference for both web designers and programmers.  Gecko is part of Mozilla where it gets its code name -moz.  It powers all the Mozilla aps.

The other layout engine is called the Trident layout engine.  But you won’t be seeing any advanced code for Trident as they release none!  Trident powers IE and the Microsoft line of products.

I don’t worry about Trident or IE, Microsoft continues to lose market share.  Where as all Microsoft loses, Google Chrome gains.  Whereas Firefox has a firm hold on the technical community.

The takeaway here is that all you have to think about is -moz and -webkit.  Where you see one you should see the other!

Height, Width and Centering

margin:auto;
position:relative;
width:550px;
height:450px;

This section is pretty mundane fare. We want our form to have height, width and be centered. The position: relative is just so we can position the send button somewhere one our form later.

Text Styles

font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-style: italic;
line-height: 24px;
font-weight: bold;
color: #09C;
text-decoration: none;

No surprises here! These are just standard css styles for the text on our form.

Border Radius

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Border radius provides rounded corners for our form. Increase the number for more rounded (larger) corners.

Padding

padding:10px;

Padding provides some needed space between the text and the edge of the form. That way your text doesn’t fall outside the edge of your form, and its rounded corners.

Borders

border: 1px solid #999;
border: inset 1px solid #333;
border: 1px inset #333;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}

We wrap up the form CSS rules with styles for the borders.

Contrast and dimension can be created with subtle borders. I considered this may become a pop-up form so I added added box shadows to the overall form. This will add dimension and make the form look more like it is floating over the rest of the web-page it is popped up on. Many people use this technique right now.

The Form Property

This is what we have in our form property now. (This is the largest property we have!)

/* Working Code - #tukod-form-one */
#tukod-form-one form {
/* Million System Specificity = 1,000,001 */
background: -webkit-gradient(linear, bottom, left 175px, from(#CCCCCC), to(#EEEEEE));
background: -moz-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
margin:auto;
position:relative;
width:550px;
height:450px;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
font-style: italic;
line-height: 24px;
font-weight: bold;
color: #09C;
text-decoration: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding:10px;
border: 1px solid #999;
border: inset 1px solid #333;
border: 1px inset #333;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}

Our form now looks something like this:

We will continue with the styles on Simple CSS Style for Web Forms, part 2.

Edit 2015-12-12: I made the following corrections above:

border: inset 1px solid #333;
border: 1px inset #333;