Menu
Here's a sample code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sample Textarea</title>
<style type="text/css">
* {width:100%; height:100%; margin:0; border:0; padding:0; background:#D3D3D3;}
textarea {overflow:auto; box-sizing:border-box; -moz-box-sizing:border-box; padding:6px;}
</style>
</head>
<body>
<form action="#">
<textarea rows="1" cols="1">This is some text.</textarea>
</form>
</body>
</html>
I used the box-sizing property to set the textarea width to 100% plus some padding and it works in all major browsers. However, in Firefox if you add more content to the textarea, you'll see unwanted padding around the scrollbar.
589
Firefox applies the padding not only to the content but to the scrollbar as well.
Change your textarea style definition so that it reads like this:
textarea
{
overflow:auto;
box-sizing:border-box;
-moz-box-sizing:border-box;
line-height:26px;
padding: 0;
padding-left: 6px;
}
This corrects the padding issue, but once there are two or more lines of text it will look somewhat awkward.
116
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
