Thu, 2013-08-08 17:23
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; border-radius:2px; padding-right:30px; -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; padding-right:70px; } /* === 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.