Grow your CSS skills. Land your dream job.

Creating a Nice Textarea

Published by Chris Coyier

A textarea is an element on a webpage that you can type into. These are commonly used as commenting areas, contact forms or address entry areas. All browsers have defaults styles for textareas which vary. You can take control of your textareas and style them with CSS, just like any other element:

styledtextarea.png
textarea#styled {
	width: 600px;
	height: 120px;
	border: 3px solid #cccccc;
	padding: 5px;
	font-family: Tahoma, sans-serif;
	background-image: url(bg.gif);
	background-position: bottom right;
	background-repeat: no-repeat;
}

In this case, the textarea with the id of "styled" has its width and height explicity set, a border and padding applied, default font set, and a background image applied.

Textareas also support some other features to help you control their aesthetic behavior. Namely, "onfocus" and "onblur" which you can apply inline and give javascript commands, like so:

<textarea name="styled-textarea" id="styled" onfocus="this.value=''; setbg('#e5fff3');" onblur="setbg('white')">Enter your comment here...</textarea>

This will change the background color of the textarea to a light green color when it's active and back to white when it is inactive. Just include this simple script somewhere on your page*:

function setbg(color)
{
document.getElementById("styled").style.background=color
}

*Either create a .js file and link to it in your header or put it inside a <script type="text/javascript"> tag.

See all this in action at the example page.

[LIVE EXAMPLE]

Comments

  1. Could you not include the css for the textbox being active etc in the stylesheet? and what is the difference between the a:hover etc and using the javascript??

    Nice tip using a background image with the words “Thank you”, maximising the space.

  2. Permalink to comment#

    Well….. the only way to include it in the stylesheet is to include it as a pseudo class like this:


    input:focus, textarea:focus{
    background-color: lightyellow;
    }

    But, that’s not gonna work in IE 6 or below. Also, using the Javascript allows you to “clear” the field, which is a nice touch I think. It’s kind of annoying if you click into a field and have to manually delete what is inside it.

  3. Permalink to comment#

    Be carreful with the onfocus=”this.value=””.
    Each time the user leave the textarea and come back, he loose he changes…
    You need to use a little more complicated javascript…

  4. Permalink to comment#

    That is a good point, if you don’t want the form to clear if a user clicks away and back in after that first time, you just need to do this instead:


    onfocus="this.value=''; this.onfocus=null;"

    A little more complicated, but not too bad =)

    • Bob
      Permalink to comment#

      Now if you do this the textarea doesn’t change back to the onfocus color.

  5. always wanted to know how they get the text background image …
    now that i know …
    back to editing the style sheet and stuff …
    dang …

  6. Feliks

    Real cool, can I used it on may web site.

  7. Oh I like this! Very cool. :)

  8. Permalink to comment#

    How do I do it but with text instead of an image like your search box?

  9. Thank you very much for the post.

    btw, Nice blog, too!!!

  10. Permalink to comment#

    I don’t suppose you know of a way to get textareas to exhibit console-like behavior a la this video? I suppose it might use flash – kind of hard to tell.

  11. Terry
    Permalink to comment#

    I couldn’t make it work, tried everything I could think of.

  12. Permalink to comment#

    How would I do this with two text areas on one page?

  13. james
    Permalink to comment#

    Really nice tip! Thanks!

  14. Hi,

    Although you wrote jQuery, you used just javascript.

    in jQuery, you can write :

    $(‘styled’).focus().css(‘background’, ‘#e5fff3′);

  15. prash
    Permalink to comment#

    To make textarea active when on click with css not with jacascript function?

  16. Hey, this worked perfectly for my form! Thanks. I wondered where exactly I would add a red border like the rest of the form?

    http://prismcareernetworks.com/prism_wordpress/wp-content/forms/registration_candidate/registration_form_candidate.html

  17. I spoke too soon. It’s only working in the first textarea and not the rest. I used the id=”styled” on each textarea but nothing happens. ???

  18. I figured it out.

    • Chitral Cheetah
      Permalink to comment#

      @Checmark – Can you please describe how you made this work for multiple textareas ?

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".