where's the salt?

03/24
2010

Dress up your forms (pure CSS color-changing rounded corner input fields) (10,548 views)

CSS Forms

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:
Textfield Sprite

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.

Tags:

Date posted: Wednesday, March 24th, 2010 at 7:41 am (7 years, 7 months ago.)
Posted in: tech mix
Comments RSS Feed Comments RSS Feed
Reply
Ttrackback
About the author:

Nina Khoury is a software engineer, self-described geek and EVP of ninanet site solutions. She founded one of the first online agencies in Austria in 1997, taught at various universities for seven years and now lives in Sin City - Las Vegas, NV.

2 Responses to “Dress up your forms (pure CSS color-changing rounded corner input fields)”

  1. 1

    […] with rounded corners to add textarea field is almost the exact same procedure as described in Dress up your text fields. With one exception: In Internet Explorer 7 the whole background image (in our case the sprite with […]

    Dress up your forms (pure CSS textarea changing background) on May 14th, 2010 at 6:40 am
  2. 2

    Just want to say what a great blog you got here!
    I’ve been around for quite a lot of time, but finally decided to show my appreciation of your work!

    Thumbs up, and keep it going!

    Cheers
    Christian, iwspo.net

    unlalyday on May 15th, 2010 at 7:19 am

Leave a Reply


search

Categories

Send this to friend