Is there a simple way to make html textarea and input type text equally wide?

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.


You should be able to use

.mywidth {
  width: 100px;   
}
<input class="mywidth">
<br>
<textarea class="mywidth"></textarea>

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%; }

Tags:

Html

Css

Textarea