Last Updated: February 25, 2016
·
442
· christopherjenkins

TextArea Handiness

I don't see this nearly as often as I think it should be implemented. I'm very much in the camp that your users don't need to be able to do things that can break your site/layout. Whenever I see those little drag lines in the bottom right corner of a Text Area, I always grab it, and more often than not, I can make someone's site look hideous. You can turn that off super easily just by adding a couple lines in your CSS for the text area:

.classname {
     overflow:auto;
     resize:none;
}

Done and Done. Now no one can change what shouldn't have been an editable zone either. Another handy thing to add is padding and margins so that IE doesn't add those in and make them look differently than your normal inputs. You should also add this to your inputs:

 .classname {
     overflow:auto;
     resize:none;
     padding:5px;
     margin:0px;
}

This effectively destroys any differences that sometimes arise when you are doing cross browser testing. To position my inputs and TextAreas I then wrap everything in a div and position that.

You can also always use a CSS Reset like this one: http://meyerweb.com/eric/tools/css/reset/

This will ensure you have a good base to start from when doing cross browser testing.