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.
![CSS @supports]()
Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS. What we end up doing is repeating the same properties multiple times with each browser prefix. Yuck. Another thing we...
![5 More HTML5 APIs You Didn’t Know Existed]()
The HTML5 revolution has provided us some awesome JavaScript and HTML APIs. Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers. Regardless of API strength or purpose, anything to help us better do our job is a...
![Image Manipulation with PHP and the GD Library]()
Yeah, I'm a Photoshop wizard. I rock the selection tool. I crop like a farmer. I dominate the bucket tool. Hell, I even went as far as wielding the wizard wand selection tool once.
...OK I'm rubbish when it comes to Photoshop.
![Image Data URIs with PHP]()
If you troll page markup like me, you've no doubt seen the use of data URI's within image src attributes. Instead of providing a traditional address to the image, the image file data is base64-encoded and stuffed within the src attribute. Doing so saves...
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)