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

Question

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 C

Answer 1

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

Answer 2

you can also use the following CSS:

.mywidth{
width:100px;
}
textarea{
width:100px;
}

HTML:

<input class="mywidth" >
<textarea></textarea>

Answer 3

These days, if you use bootstrap, simply give your input fields the form-control class. Something 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>

Answer 4

You should be able to use

.mywidth {
  width: 100px;   
}

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

Answer 5

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

Answer 6

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