3) Dress up your textareas: rounded corners, changing background & fixed scrolling background IE bug

Adding a sprite 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 both states) in the textarea scrolls by when a user enters text below the specified amount of rows.

An example form without the workaround is here: IE7 textarea scrolling background bug (you have to use IE 7 to see the effect).

Create a basic textarea and apply a class (don’t worry about setting rows and cols, as we will override the settings via CSS):

The following CSS is what causes the bug in IE to appear:

textarea.txtcomment {
	border:0;
	overflow:hidden;
	color:#FFFFFF;
	font:1.1em  Verdana, Arial, Helvetica, sans-serif ;
	height:120px;
	width:300px;
	padding:13px;
	background:url("path-to-your-image-file") no-repeat scroll 0 0;
}

textarea.txtcomment:focus {
	background:url("path-to-your-image-file") no-repeat scroll 0 -140px;
}

As seen in previous posts, we are simply applying some basic CSS to our textarea: we set the border to 0 to prevent the browser from displaying it, we set the desired font style and size, etc.

By using the pseudo-class :focus which is triggered when the user clicks inside the textarea to enter text, we expect the background to change as specified in line 13. Which happens without a problem in Firefox & Safari, but not in Internet Explorer 7.

IE 7 ignores the pseudo-class :focus, but this doesn’t seem to be the problem, as ignored declarations are simply dropped. In this case, the whole sprite we’re using as background starts scrolling, from top to bottom, eventually showing the element’s actual background color.
You can see the scrolling background effect on this page (use IE 7 to access it).

A quite simple workaround is to wrap another div around the textarea and apply the initial sprite to the outer div instead of the textarea:

#txt_cont {
	height:140px;
	width:300px;
	margin-top:10px;
	background:url("path-to-your-image-file") no-repeat scroll 0 0;
}

textarea.txtcomment {
	border:0;
	overflow:hidden;
	color:#FFFFFF;
	font:1.1em  Verdana, Arial, Helvetica, sans-serif ;
	height:120px;
	width:300px;
	padding:13px;
}

textarea.txtcomment:focus {
	background:url("path-to-your-image-file") no-repeat scroll 0 -140px;
}

We’ve removed the background-image definition from the textarea, assigned the ID #txt_cont to the outer div and set the background-image of that div to the upper portion of the sprite we initially used as a background-image for the textarea. Everything else stays the same.

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.

We are not designers, we just like pretty things (and pretty code). And we like it best if it all is functional and adds to the experience without limiting it. And while we do use jQuery for certain effects on other sites, these a pure CSS solutions.

Everything described here we are using in the comments form at the bottom of this page.

1) Dress up your Submit button (without using input type="image"): The easiest way ever

What you need:
a) an image sprite
b) a class/id to identify your submit button
c) the pseudo-class :hover

We are using a sprite (an image containing our button’s two *states*) to avoid loading another image (plus we promised not to use any JavaScript); we are simply shifting the visible part of the image when :hover is called (the user moves the mouse over the button).

We are using a blank sprite (without any text); this way we can simply assign what we want to appear *on the button* to the button’s value in our HTML code instead of having to create a variety of different images. We are NOT using the sliding doors technique (first introduced in 2003) to create variable width buttons.

Our sprite is 150×50 and will definitely accommodate the text *submit comment*:

We create a submit button, and (we like it simple) add an id with the value *submit*. If you have more submit buttons on your site, create a class for them and automatically apply the definitions to all your submit buttons. Remember: an id must be unique to the page.

The HTML:

We need some CSS:

#submit {
	border:0;
	width:150px;
	height:25px;
	color:#111111;
	font-size:11px;
	background:url("path-to-the-image-file") no-repeat 0 0;
}

What is happening here?
1: Add a selector for the previously assigned id “submit” (#submit).
2: Set the border to 0. Otherwise, your browser will display the default border around the element.
3: Set the width of the button (150px – same width as the sprite)
4: Set the height of the button (50px – 50% of the sprite’s height)
5: The color for the foreground font (the color you want the text on the button to be)
6: The font size
7: Shorthand background definitions:
Path to the sprite (url)
do not repeat the image
start displaying the image starting at 0 px from the left and 0 px from the top (You can also use “top left” instead of 0 0).

In the :hover declaration for the id “submit” (#submit) we change the foreground color (the color for the text) and tell the browser to display a different part of the image: start at 0 px from the left (same as above) and 25 px from the top:

#submit:hover {
	color:#a2eb41;
	background:url("path-to-the-image-file") no-repeat 0 -25px ;
}

Note/Disclaimer: While IE 6 will display the background image, it does not recognize Alpha transparency in PNG files. If you need to match the background-color of your element, create your sprite with a matching background.
IE 6 also does NOT recognize the :hover pseudo-class. Font color and background image do not change in IE 6. IE 7 does recognize :hover, but still doesn’t recognize :focus (which we will use in the next part).