Box-sizing: how to get rid of the scrollbar padding in Firefox

HTML & CSS
1

Hi,

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.

Many thanks for any help!
Mike

2

Where are you seeing the extra padding? Do you have a screenshot as I’m not sure where I am looking?

Unless you mean the space that the resize icon takes up that allows users to resize the textarea. Yuo can disable it with:


textarea {resize:none}

BTW never do this for real: (I realise you just added it for the demo but just in case anyone else thinks its a good idea)


* {width:100%; height:100%; margin:0; border:0; padding:0; background:#D3D3D3;}

The only properties you want to supply universally are margins and padding only and even then its debatable as it affects some form controls detrimentally.

3

Dear Paul,

As I mentioned you’ll see the scrollbar and its extra padding if you add more content to the textarea.

4

Ah ok it’s a long standing bug in Firefox with no solution at present I’m afraid. I couldn’t see any workarounds other than not applying right padding (but you still get the gap at the top and bottom). Maybe use a taller line height and just use left padding.