Box Sizing and Control Textarea Width
Working with html elements, sometimes we have to control width of an element within its parent container. As we know that few html elements containing padding which makes things more vulnerable. For example working with textarea sometimes we needed 100% width. But it creates problem as it contains padding which stretch it outside of the parent container.
Now CSS3 provides quick solution for this issue. The border-box property can do this. You can use border-box with box-resizing property with textarea or other elements. The border-box property will make the final rendered elements with the declared width, and also will remove any border and padding inside the element.
- textarea {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- width: 100%;
- }
By using above example code, you can now safely declare your textarea to be of 100% width, including pixel-based padding and border, and accomplish out layout perfectly.
Follow @phpzag
