Friday, February 13, 2009

How to make a textbox and a textarea same width across browsers

Update: It's been a long while since I've written this post. For a better way to solve this problem, please see http://www.w3schools.com/cssref/css3_pr_box-sizing.asp (http://caniuse.com/#search=box-sizing)

Thanks to the *brilliant* CSS box model, very simple tasks have become a nightmare.

I've been struggling lately to do a very simple thing, which is to make a textbox (ie. <input type="text">) and a textarea same width so that they align nicely.

The problem with making a textbox and textarea same width is that all browsers add 1px padding to textboxes that can't be removed. In other words, setting the padding to 0px won't remove that 1px padding. A common trick to get rid of padding is to float the element but unluckily this doesn't work with textboxes. Well, this means we have extra 2px in the width of the textbox that we simply can't get rid of. Now, this wouldn't be a problem if the same thing applied to textreas as well but unfortunately this is not the case. In most browsers (IE, Safari and Chrome), setting the padding of a textrea to 0px *unfortunately* works. One exception to this is FireFox which applies the 1px non-removable padding to textareas as well. This is why the problem doesn't exist with FireFox. But, should we ignore IE, Safari and Chrome and assume everyone is using FireFox? I guess not, it definitely makes more sense to make it work in those browsers and find a hack for FireFox and actually this is what I did.

Having had a look on mozilla's website, I came across those two extensions to CSS:
-moz-padding-start and -moz-padding-end.

So, to make a textbox and a textrea same width across browsers you can use this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
*
{
    padding: 0px;
    margin: 0px;
}
#textbox
{
    width: 500px;
    -moz-padding-start: 1px;
    -moz-padding-end: 1px;
}
#textarea
{
    width: 500px;
    padding: 1px;
}
</style>
</head>
<body>
<input type="text" id="textbox" /><br />
<textarea id="textarea"></textarea>
</body>
</html>

Adding 1px to the textrea makes the text look nicer than with no padding at all (with 0px padding, the text sticks to the border which is not visually appealing). In FireFox, we will have 2px padding for the textarea and 2px left and right padding for the textbox, but, visually speaking, it almost looks the same (try to view the code in FireFox).

This code was tested in IE, Safari, Chrome, FireFox and SeaMonkey (which uses the same rendering engine as FF) and worked perfectly. Note that this hack is not perfect. For example, Opera will display the textarea 2px wider than the textbox. For me I don't care about Opera very much (not so many people use it), besides it's only 2px, so, it's not something that will make your site unusable. There could probably be a hack for Opera too but again I'm not interested in Opera, so for me it's not worth the time. It probably won't work with other less popular browsers too. I tested it in the ones I care most about (2 extra pixels in a not popular browser is not a big deal. I can live with that).

In terms of rendering engines (aka layout engines), this will work with Trident based browsers (Internet Explorer), WebKit based browsers (Safari, Google Chrome and other browsers) and Gecko based browsers (FireFox, SeaMonkey and other browsers).

Please note that this won't work if the visual styles are not enabled in Windows XP or Vista (with the exception of FireFox and the other browsers that are based on the same engine), but as very few people (almost none) disable the visual styles so I'm not so worried about that one too.

Finally, if you're a control freak and want it to work in every browser then your last resort is javascript (I was working on that but gave up on it after I came up with this simple hack), but even this won't work if javascript is disabled in the browser.

18 comments:

  1. Nice post. The number of browser-platform combinations we have to test with has increased dramatically in recent times. I am actually writing this in Chrome now.

    ReplyDelete
  2. Gr8!! this worked for me.

    ReplyDelete
  3. nice tip! thankx
    -Karthik

    ReplyDelete
  4. I used it this way
    -Karthik

    #contactform textarea
    {
    padding:1px;
    width: 150px;
    overflow:auto;
    }
    #contactform input
    {
    width:150px;
    -moz-padding-start: 1px;
    -moz-padding-end: 1px;
    }

    ReplyDelete
  5. No -moz top or bottom padding possible? Seems incomplete...

    ReplyDelete
  6. Didn't use -moz-padding properties. Just gave the same width for input text boxes and textarea. After that made padding:0; and worked like a charm in webkit browsers.

    ReplyDelete
  7. Awesome tips and hints, to make a textbox and a textarea same width across browsers is easy with your recommendation. Thank you for sharing

    ReplyDelete
  8. What about iPhone? The rendering I get based on setting textbox and textarea widths to 100% is significantly different/

    ReplyDelete
  9. Thank you it has been a very good guide, now to make a textbox and a textarea same width across browsers is without a doubt very easy utilizing your guidance. Kudos

    ReplyDelete
  10. Nice information on how to make a textbox and a textarea same width across browsers. Extremely detailed and very great advices. Kudos

    ReplyDelete
  11. Nice artical But i am unable go give padding to a textare. i need 2-4 px padding in a textarea.only left padding works but not from the top.can you suggest anything about it??

    ReplyDelete
  12. @Anonymous, simply using padding: 2px; (or 4px) should do the trick. If only the left padding works, then you must have other code that resets the padding later. Try to check the rest the code and you should find what's causing the problem.

    Good Luck,
    Wal

    ReplyDelete
  13. Thank you Wal, it helped me with Firefox/Chrome compatibility.

    Cheers,

    Mike

    ReplyDelete
  14. If % does not work, try px;

    ReplyDelete
  15. in ie textarea containing text show border effect

    ReplyDelete
  16. None of these worked for me in firefox (FF30 on OS X 10.7) and I found using 100% width on the textarea & inputs, in a fixed width containing element with overflow: hidden, combined with resize: none on the textarea works.

    Firefox appears to add about 2px width beyond the container's width, if the textarea is 100% wide, irrespective of padding and borders, but overflow: hidden prevents this.

    ReplyDelete