where's the salt?

03/29
2010

Dress up your forms (pure CSS textarea changing background) (8,740 views)

CSS textarea styling

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.

Tags:

Date posted: Monday, March 29th, 2010 at 7:11 am (7 years, 3 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.

5 Responses to “Dress up your forms (pure CSS textarea changing background)”

  1. 1

    […] This post was mentioned on Twitter by ninanet. ninanet said: Dress up your forms (pure CSS textarea changing background, rounded corners): http://bit.ly/9x3uz0 […]

    Tweets that mention Dress up your forms (pure CSS textarea changing background) -- Topsy.com on March 29th, 2010 at 7:31 am
  2. 2

    Hola, Super post, tienen que marcarlo en Digg

    Socco on March 31st, 2010 at 9:00 pm
  3. 3

    My cousin recommended this blog and she was totally right keep up the fantastic work!

    school grants on April 6th, 2010 at 1:10 pm
  4. 4

    Replace Words In Textarea…

    I found your entry interesting thus I’ve added a Trackback to it on my weblog :)…

    PHP Freelance Jobs - Work From Home - Online Jobs on June 18th, 2010 at 1:07 pm
  5. 5

    This works great in IE, but not in Firefox (3.6.8 on Vista and 3.6.3 on Win 7 tested). If you enter enough lines of text, the cursor goes off the bottom of the textarea so that you can’t see what you’re typing anymore.

    Anyone know of a fix for this? It’s a bit of show stopper.

    Shane Higgins on July 30th, 2010 at 12:58 pm

Leave a Reply


search

Categories

Send this to friend