Native borders for input controls in various browsers often look more visually appealing compared to those set with CSS. However, the thickness of these native borders and padding can vary across different browsers, making it difficult to predict beforehand. In this case, I want the width of a textarea to span 100% of the container element while accounting for these native borders and padding.
Below is the HTML code:
<div class="container">
<div class="wrapper">
<textarea rows="10" cols="42">Some text</textarea>
</div>
</div>
Accompanied by the following CSS:
.container {
width: 400px;
}
textarea {
width: 100%;
}
The issue arises when the textarea overflows the container on the right side by twice the pixel thickness of the native borders along with the padding. How can this overflow be resolved?
Introducing additional markup is acceptable if necessary, as are browser-specific CSS stylesheets, as long as they do not rely on assumptions about specific border thickness from particular browsers.
Is it feasible to achieve the desired 100% width using CSS in standard mode across all major browsers? This should ideally include compatibility with older browsers like IE6 and IE7, without relying on JavaScript (including expressions).