Full Width Textareas
Working with textarea widths can be painful if you want the textarea to span 100% width. Why painful? Because if the textarea's containing element has padding, your "width:100%" textarea will likely stretch outside of the parent container -- a frustrating prospect to say the least. Luckily there's a quick CSS solution to this problem!
The CSS
box-sizing to the rescue!
textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
}
Setting the box-sizing to border-box allows the textarea to respect its parent container's padding and border, recalculating what 100% actually means. If the box-sizing were content-box, the textarea would continue to stretch outside the parent container as it would have before.
![39 Shirts – Leaving Mozilla]()
In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell...
![I’m an Impostor]()
This is the hardest thing I've ever had to write, much less admit to myself. I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life. All of those feelings were very...
![Custom Scrollbars in WebKit]()
Before each of the browser vendors we like was providing unique CSS controls, Internet Explorer was setting the tone. One such example is IE's early implementation of CSS filters. Internet Explorer was also the first browser that allowed developers to, for better or worse, customize...
![Instagram For MooTools]()
If you're still rocking an iPhone and fancy taking a photo every now and then, you'd be crazy not to be using an app called Instagram. With Instagram you take the photos just as you would with your native iPhone camera app, but Instagram...
Very nice. I’ve struggled with this in the past. Top tip
Great tip. Thanks.
Great tip.
Is it support in all browser?
last I checked, ie9 did not support this, but i think ie10 had plans to
Actually it is quite well supported :
Firefox, Opera, Safari, Chrome, IE8+
See : http://caniuse.com/#feat=css3-boxsizing
See this Paul Irish link…
http://paulirish.com/2012/box-sizing-border-box-ftw/
Helps tremendously with mobile development as well and calculation of % width when utilizing this box-sizing.
Does not work for me (Win7, Firefox 15.0.1)
I use Win7 64bits and tested with Firefox 15.0.1, IE9, Safari and Chrome. All working fine
Be sure to use all 3 declarations for maximum compatibility:
Does not work for me too (Mac OS X, Chrome 26)
Works for me on this stack!
Hmm… nice, I got saved! thanks for sharing :D
Nice, it works…
Hi David! First i should say thanks about what you have written, I have question, i have done whatever you said but i wanna get some space from around of its parent tag, and i gave it margin:10px . But it doesn’t work ! Why?
Doesn’t work for me (Windows 7 + Chrome 46.0.2490.80 m)