Take the 2-minute tour ×

Is there a simple way of getting a HTML textarea and an input type="text" to render with (approximately) equal width (in pixels), that works in different browsers?

A CSS/HTML solution would be brilliant. I would prefer not to have to use Javascript.

Thanks /Erik

share|improve this question
See the answer to Getting HTML textarea controls to expand to width of container, it's better than the answers included here. Or for complete explanation: Box Sizing | CSS-Tricks –  Yarin Mar 4 '12 at 21:51

12 Answers 12

up vote 12 down vote accepted

You should be able to use

    width: 100px;   

<input class="mywidth" >
<textarea class="mywidth"></textarea>
share|improve this answer
This doesn't seem to work anymore, however this solution: stackoverflow.com/questions/9555877/… does –  H2ONOCK Nov 28 '13 at 10:29

To answer the first question (although it's been answered to death): A CSS width is what you need.

But I wanted to answer Gaius's question in the answers. Gaius, you're problem is that you are setting the width's in em's. This is a good think to do but you need to remember that em's are based on font size. By default an input area and a textarea have different font faces & sizes. So when you are setting the width to 35em, the input area is using the width of it's font and the textarea is using the width of it's font. The text area default font is smaller, therefore the text box is smaller. Either set the width in pixels or points, or ensure that input boxes and textareas have the same font face & size:

.mywidth { width: 35em; font-family: Verdana;  font-size: 1em; }

<input type="text" class="mywidth"/><br/>
<textarea class="mywidth"></textarea>"

Hope that helps.

share|improve this answer

Someone else mentioned this, then deleted it. If you want to style all textareas and text inputs the same way without classes, use the following CSS (does not work in IE6):

input[type=text], textarea { width: 80%; }
share|improve this answer

This is a CSS question: the width includes the border and padding widths, which have different defaults for INPUT and TEXTAREA in different browsers, so make those the same as well:

<style type="text/css">
textarea, input { padding:2px; border:2px inset #ccc; width:20em; }

This is described in the Box dimensions section of the CSS specification, which says:


share|improve this answer

Yes, there is. Try doing something like this:

<textarea style="width:80%"> </textarea>
<input type="text" style="width:80%" />

Both should equate to the same size. You can do it with absolute sizes (px), relative sizes (em) or percentage sizes.

share|improve this answer

Obviously everybody else gets a different result, but when I do this:

form label, form input, form textarea {
  display: block;
  margin: 1em 0 0 0;
  padding: 0;
  width: 35em;

I get textareas that are about 5% narrower than my inputs:

input vs textarea

It's not because of a phantom scrollbar, because forcing the scrollbar to appear yields this:

input vs textarea with scrollbar

What's causing this?

share|improve this answer
It’ll be because the input and textareas have different default font-family settings. Try adding something like font-family: 'Arial', sans-serif to your style block. –  Paul D. Waite Oct 3 '08 at 13:51

Use CSS3 to make textbox and input work the same. See jsFiddle.

.textarea, .textbox {
    width: 200px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
share|improve this answer

Just a note - the width is always influenced by something happening on the client side - PHP can't effect those sorts of things.

Setting a common class on the elements and setting a width in CSS is your cleanest bet.

share|improve this answer

Use a CSS class for width, then place your elements into HTML DIVs, DIVs having the mentioned class.

This way, the layout control overall should be better.

share|improve this answer

As mentioned in http://stackoverflow.com/questions/161915/unequal-html-textbox-and-dropdown-width-with-xhtml-10-strict it also depends on your doctype. I have noticed that when using XHTML 1.0 strict, the difference in width does indeed appear.

share|improve this answer

you can also use the following CSS:



<input class="mywidth" >
share|improve this answer
Your first solution was already mentioned by the accepted answer, and the second solution will make all textareas 100px wide. –  Manuel Jul 23 '13 at 13:52
input[type="text"] { width: 60%; } 
input[type="email"] { width: 60%; }
textarea { width: 60%; }
textarea { height: 40%; }
share|improve this answer

Your Answer


