How to set element width (textarea) with unknown borders and padding to be 100% including borders and padding using only CSS?
Many browsers have native borders for input controls which look way better than borders set with CSS. Some browsers have 1px for native borders, some 2px, so the border thickness is generally unknown beforehand. Same with padding. Now I want the width of a textarea to be 100% of the container element including these native borders and padding.
开发者_StackOverflowHere is the HTML
<div class="container">
<div class="wrapper">
<textarea rows="10" cols="42">Some text</textarea>
</div>
</div>
And some CSS
.container {
width: 400px;
}
textarea {
width: 100%;
}
Obviously, the textarea will overflow the container on the right side twice the px thickness of native borders plus twice the native padding. How do I fix this overflow?
Extra markup is OK if it is need, browser specific CSS stylesheets are also OK, unless they assume some specific border thickness from that browser.
Is it possible to get that 100% width with CSS in standards mode in all major browsers? It should would work in ancient ones such as IE6 and IE7. Preferably without JavaScript (including expressions).
I'm not sure I can get you all the way there. I realize you'd like to keep the original borders and padding, so this may not be your answer.
Same markup:
<div class="container">
<div class="wrapper">
<textarea rows="10" cols="42">Some text</textarea>
</div>
</div>
CSS:
.container
{
width: ABCpx;
}
.wrapper
{
padding: 3px;
}
textarea
{
border-width: 1px;
margin: -3px;
padding: 2px;
width: 100%;
}
You can use CSS3 to achieve it, not for IE6 or IE7 though - I haven't tested IE8, but allegedly it works.
This may not be appropriate since you are saying "CSS2.1"... How I wish the day was here when we can start using this stuff...
<!DOCTYPE html>
<html
<head>
<style type="text/css">
.measure {
width: 400px;
background: blue;
}
.container {
width: 400px;
background: red;
}
textarea {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="measure">
</div>
<div class="container">
<div class="wrapper">
<textarea rows="10">Some text</textarea>
</div>
</div>
You can use this for solve your problem
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<style type="text/css">
.form-wrapper {
width: 600px;
}
textarea {
background: #333;
border: 1px solid #f00;
color: #fff;
padding: 10px;
height: 200px;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;}
</style>
</head>
<body>
<div class="form-wrapper">
<textarea rows="10" cols="35">Enter Description</textarea>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论