HEELPBOOK - HTML – Creating a Nice Textarea ########################


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:


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 it’s 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.


############ ARTICLE INFO #############

Article Month: February
Article Date: 28/02/2012
Permalink: http://heelpbook.altervista.org/2012/html-creating-a-nice-textarea/
Source: http://css-tricks.com/creating-a-nice-textarea/
Language: English

View more articles on: http://www.heelpbook.net/
Follow us on Facebook: http://it-it.facebook.com/pages/HeelpBook/100790870008832
Follow us on Twitter: https://twitter.com/#!/HeelpBook
Follow us on RSS Feed: http://feeds.feedburner.com/Heelpbook

Images: 

- http://heelpbook.altervista.org/wp-content/uploads/2012/02/HTML---Creating-a-Nice-Textarea_E5CB/styledtextarea.png