[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">
<br>
<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">
<html>
<head>
<title>width</title>
<style type="text/css">
textarea, input { padding:2px; border:2px inset #ccc; width:20em; }
</style>
</head>
<body>
<p><input/><br/><textarea></textarea></p>
</body>
</html>

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>

Source: stackoverflow.com

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

How do I fix inconsistent Textarea bottom margin in Firefox and Chrome?

Disable linebreaks in HTML textarea

div resizable like text-area

typing in textarea super slow when lots of text inside

Adding padding to a textarea pushes the element outside of the div

How to create a fixed size twitter bootstrap text area

Can I select empty textareas with CSS?

How to clear textbox on HTML using Javascript

Height of textarea does not match the rows in Firefox

Copying text of textarea into div with line breaks