No replies
Last seen: 4 years 2 weeks ago
Timezone: GMT-5
Joined: 2005-04-11
Posts: 66
Points: 29

Here's my code:

.contact_form textarea {padding:8px; width:300px;}
	/* form element visual styles */
	.contact_form input, .contact_form textarea { 
		border:1px solid #aaa;
		box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
		-moz-transition: padding .25s; 
		-webkit-transition: padding .25s; 
		-o-transition: padding .25s;
		transition: padding .25s;
	.contact_form input:focus, .contact_form textarea:focus {
		background: #fff; 
		border:1px solid #555; 
		box-shadow: 0 0 3px #aaa; 
/* === HTML5 validation styles === */	
.contact_form input:required, .contact_form textarea:required {
	background: #fff url(../Images/red_asterisk.png) no-repeat 98% center;
.contact_form input:required:valid, .contact_form textarea:required:valid {
	background: #fff url(../Images/valid.png) no-repeat 98% center;
	box-shadow: 0 0 5px #5cd053;
	border-color: #28921f;
.contact_form input:focus:invalid, .contact_form textarea:focus:invalid {
	background: #fff url(../Images/invalid.png) no-repeat 98% center;
	box-shadow: 0 0 5px #d45252;
	border-color: #b03535

And here's what it looks like in FF v22 -- noticed the highlighted area where the user's mouse would grab and resize the textarea box.

In IE10, it's not even resizable. If I get rid of the padding, the transition no longer works. Any suggestion is much appreciated.