Dress up your forms (pure CSS color-changing rounded corner input fields)

2) Dress up your input/text fields: rounded corners, changing colors: The easiest way ever

What you need:
a) An image sprite (if you want the colors to change)
b) A CSS class to apply to your text fields
c) The :focus pseudo-class

Basically we are using almost the same method as in the first part of the series, Dressing up your Submit button in which we use the :hover pseudo-class to change the background image for the submit button when the users moves the mouse over it.

We cannot use the :hover class for text fields, we will be using the :focus pseudo-class instead. :focus gets triggered when a user places the cursor inside a text field (related to JavaScript’s focus() method).

The sprite we are using is the following:

Let’s create a simple text input field and assign the class “txtfld” to it:

The CSS gives the field its refined look:

.txtfld {
	font:1.1em  Verdana, Arial, Helvetica, sans-serif ;
	width:274px;
	height:24px;
	border:0;
	background:url("path-to-your-image-file") no-repeat 0 0;
	color:#FFFFFF;
}

1: Define the txtfld class
2: Font declaration shorthand:
enlarge font size to 1.1
use Verdana, Arial, Helvetica and make sure if none of these are available that we are still using a font without serifs (sans-serif)
3: Set the width of the field
4: Set the height of the field
5: Set the border to 0, otherwise the browser will display the default border around the element
6: Shorthand background definition:
Set the path to the sprite
Don’t repeat the image
Start displaying the image 0px from the top and 0px from the left (you can always use “top” and “left” instead of 0px — without the quotes)
7: Set the font color for the text inside the field (white)

Similar to the technique used to change the background image for the submit button, we use another pseudo-class to change the background image when the user places the cursor inside:

.txtfld:focus {
	background:url("path-to-your-image-file") no-repeat 0 -30px;
}

All this code does is tell the browser to display a different part of the sprite, starting at 0px from the left (like before) but only show the part of the image starting 30px from the top. You can use “left -30px” to achieve the same result.

You can see the effect when you click in one of the field in the comment form at the bottom of this post.

Note/Disclaimer:
IE 6 AND IE 7 will display the background image, but since they don’t recognize the :hover pseudo-class the background does not change.
IE 7 finally does understand Alpha transparency in PNG files, but again, if you do want your form fields to look halfway decent in IE 6, create the images with a matching background.