CSS Snippet: Input Boxes with Drop Shadows

Forms are a pain. They are often ugly and hard to make look the way you want them to. Let's talk about styling them a little to make them less ugly.

First, we need to decide what we want. In this case, we want a box that is 200px wide, the font is 11px Georgia in a dark olive green. And we want it to have a bit of an inset/drop shadow look. I had seen these on the web, but didn't know how to create them. I then realized it was just a border treatment and after some experimentation I got it right. I also spent a bit of time searching Google, but I must not have been searching for the right thing. Everything I saw on drop shadows talked about using an image. You don't need one for this simple treatment.

The box final:

If you can read HTML and CSS just look at this code and figure it out. If you need more information, read on.

<input type="text" name="textbox" style='width: 200px;font-size: 11px;font-family: Georgia, "Times New Roman", Times, serif;color: darkolivegreen;border: 2px solid #eee;border-left: 2px solid #999;border-top: 2px solid #999;' value="I'm an input box"/>

ok. Now that we know what we a building, let's start with the box.

Basics
<input> is the tag that says to make an input box.

There are a couple of types of input boxes, we are just dealing with text boxes in this treatment, so we tell it to be of a type="text".

We should give it a name, so that we can address it with JavaScript or do some Ajax to it later, or if we are sending it somewhere, the receiving script will need to know what it is. I will not go into scripting the receiving bit today. name="textbox" is a simple name. You should give yours something more descriptive. No spaces; letters and numbers only is best. Some other characters are allowed, but best to stick to letters and numbers. If you feel the need for a space, use an underscore (_)

And then some text to go inside. This is just the default text. It can be deleted by the user before they submit the form. I'll show you how to have the default text deleted when they click to use it in another article within the next few days. value="I'm an input box" sets the value, or text to go in the box.

Last we have a / at the end. This is for XHTML compliance. If you are using HTML 4.0 you do not need the /, but you will find that all the code I give uses XHTML 1.0 strict. Validation is important, and using well implemented standards allows everyone to view it. Basically the / says that there will be no end tag. It is a shortcut for

So far we have this:

<input type="text" name="textbox" value="I'm an input box"/>

Style tag and width
We are using a style tag for this. There is another, often better, way of dealing with CSS, using a CSS file and class. That is for another entry. Today, we will just use a style tag. If you know how to use classes, feel free.

To start off the style, we will add a width of 200 px. px is short for pixels and is 1 "dot" on your screen. It is the smallest bit that can be displayed. Here is a 1 px red dot:

style="width:200px" is what we use. style= tells the browser to use CSS for this element only. width is a CSS property saying to make the element this wide. In CSS we use : to separate property from the declaration. You could pretend it is an equals sign if that helps you. 200px says it is 200 pixels wide.

We now have this:

<input type="text" name="textbox" value="I'm an input box" style="width:200px"/>

Font
Now, lets treat the font inside the box. Here we will expand our style to include all the font styling.

We want it 11 pixels tall. We can use the font-size property to do this: font-size: 11px

We said we wanted it to be in Georgia font. Not everyone has Georgia, so we set a backup font as Times New Roman. If it can't find that, any times font. Then any serif font. Sans serif have not of these: font-family: Georgia, "Times New Roman", Times, serif

Last, we set the color. A dark olive green: color:darkolivegreen.

We add them all to the style tag, separating each with a semi-colon (;)

We now have this box:

<input type="text" name="textbox" value="I'm an input box" style='width: 200px;font-size: 11px;font-family: Georgia, "Times New Roman", Times, serif;color: #666' />

Drop Shadow
Last we have the drop shadow to put together. For this, we use a border. The border should be 2 pixels wide and solid. Lets start by making the main border: border:2px solid #eee.

Notice that this makes a nice thick border, but it is not a drop shadow or inset. It is in fact very light and hard to see at all. To make it look like a drop shadow, we need to change the top border and left border colors. We will use a darker color for this: border-left: 2px solid #999;border-top: 2px solid #999. Now lets put it all together.

<input type="text" name="textbox" value="I'm an input box" style='width: 200px;font-size: 11px;font-family: Georgia, "Times New Roman", Times, serif;color: #666;border:2px solid #eee;border-left: 2px solid #999;border-top: 2px solid #999' />