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

Accepted answer
Score: 16

You should be able to use

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


Score: 5

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

But I wanted to answer Gaius's question in 14 the answers. Gaius, you're problem is that 13 you are setting the width's in em's. This 12 is a good think to do but you need to remember 11 that em's are based on font size. By default 10 an input area and a textarea have different 9 font faces & sizes. So when you are 8 setting the width to 35em, the input area 7 is using the width of it's font and the 6 textarea is using the width of it's font. The 5 text area default font is smaller, therefore 4 the text box is smaller. Either set the 3 width in pixels or points, or ensure that 2 input boxes and textareas have the same 1 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.

Score: 4

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

input[type=text], textarea { width: 80%; }
Score: 3

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<style type="text/css">
textarea, input { padding:2px; border:2px inset #ccc; width:20em; }

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

The 3 box width is given by the sum of the left 2 and right margins, border, and padding, and 1 the content width.

Score: 3

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

.textarea, .textbox {
    width: 200px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
Score: 1

Yes, there is. Try doing something like 3 this:

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

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

Score: 0

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

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

Score: 0

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

This way, the layout control 1 overall should be better.

Score: 0

As mentioned in Unequal Html textbox and dropdown width with XHTML 1.0 strict it also depends on your 3 doctype. I have noticed that when using 2 XHTML 1.0 strict, the difference in width 1 does indeed appear.

Score: 0
input[type="text"] { width: 60%; } 
input[type="email"] { width: 60%; }
textarea { width: 60%; }
textarea { height: 40%; }


Score: 0

These days, if you use bootstrap, simply 2 give your input fields the form-control class. Something 1 like:

<label for="display-name">Display name</label>
<input type="text" class="form-control" name="displayname" placeholder="">

<label for="about-me">About me</label>
<textarea class="form-control" rows="5" id="about-me" name="aboutMe"></textarea>

More Related questions