Customizing input text boxes

[wizeman]

This tutorial will show how to change the color of an input box or textarea when they are active. This is very simple and is done using CSS. So here we go!

The first part is the CSS code, this goes in the between the head tags of your page:

<style type="text/css">
.input {
background-color: #656D78;
border: 1px solid #333333;
color: #cccccc;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}

.input:focus {
background-color: #3D4D64;
border: 1px solid #333333;
color: #cccccc;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
</style>

The highlighed text above is the stuff you have to copy. The red bits are the parts you have to customize to suit your needs.

The first class, ".input" is the code which sets the colours of the text box when it doesn't have focus(i.e. when they are not active). The second class, ".input:focus" sets the colours of the text boxes when they are active. Simple really.

Now for the html code:

Instead of using the features on dreamweaver, or frontpage, or anything that you use to make an input box, just copy this code wherever you want your tailor-made box. , red bits are customizable

<input name="tagname" class="input" maxlength="20">