<p>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?</p>

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

<p>Thanks
/Erik</p>

[{'answer_id': 28728, 'author': 'Re0sless', 'author_id': 2098, 'author_profile': 'https://Stackoverflow.com/users/2098', 'pm_score': 5, 'selected': True, 'text': '<p>You should be able to use</p>\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>.mywidth {\n  width: 100px;   \n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input class="mywidth"&gt;\n&lt;br&gt;\n&lt;textarea class="mywidth"&gt;&lt;/textarea&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 28730, 'author': 'James B', 'author_id': 2951, 'author_profile': 'https://Stackoverflow.com/users/2951', 'pm_score': 1, 'selected': False, 'text': '<p>Yes, there is.  Try doing something like this:</p>\n\n<pre><code>&lt;textarea style="width:80%"&gt; &lt;/textarea&gt;\n&lt;input type="text" style="width:80%" /&gt;\n</code></pre>\n\n<p>Both should equate to the same size.  You can do it with absolute sizes (px), relative sizes (em) or percentage sizes.</p>\n'}, {'answer_id': 28741, 'author': 'mercutio', 'author_id': 1951, 'author_profile': 'https://Stackoverflow.com/users/1951', 'pm_score': 0, 'selected': False, 'text': "<p>Just a note - the width is always influenced by something happening on the client side - PHP can't effect those sorts of things.</p>\n\n<p>Setting a common class on the elements and setting a width in CSS is your cleanest bet.</p>\n"}, {'answer_id': 28755, 'author': 'John Sheehan', 'author_id': 1786, 'author_profile': 'https://Stackoverflow.com/users/1786', 'pm_score': 2, 'selected': False, 'text': '<p>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):</p>\n\n<pre><code>input[type=text], textarea { width: 80%; }\n</code></pre>\n'}, {'answer_id': 28816, 'author': 'Drakiula', 'author_id': 2437, 'author_profile': 'https://Stackoverflow.com/users/2437', 'pm_score': 0, 'selected': False, 'text': '<p>Use a CSS class for width, then place your elements into HTML DIVs, DIVs having  the mentioned class.</p>\n\n<p>This way, the layout control overall should be better.</p>\n'}, {'answer_id': 28857, 'author': 'Peter Hilton', 'author_id': 2670, 'author_profile': 'https://Stackoverflow.com/users/2670', 'pm_score': 2, 'selected': False, 'text': '<p>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:</p>\n\n<pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;width&lt;/title&gt;\n&lt;style type="text/css"&gt;\ntextarea, input { padding:2px; border:2px inset #ccc; width:20em; }\n&lt;/style&gt;\n&lt;/head&gt;\n&lt;body&gt;\n&lt;p&gt;&lt;input/&gt;&lt;br/&gt;&lt;textarea&gt;&lt;/textarea&gt;&lt;/p&gt;\n&lt;/body&gt;\n&lt;/html&gt;\n</code></pre>\n\n<p>This is described in the <a href="http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions" rel="nofollow noreferrer">Box dimensions</a> section of the CSS specification, which says:</p>\n\n<blockquote>\n  <p>The box width is given by the sum of the left and right margins, border, and padding, and the content width.</p>\n</blockquote>\n'}, {'answer_id': 32606, 'author': 'Lee Theobald', 'author_id': 1900, 'author_profile': 'https://Stackoverflow.com/users/1900', 'pm_score': 3, 'selected': False, 'text': '<p>To answer the first question (although it\'s been answered to death): A CSS width is what you need.</p>\n\n<p>But I wanted to answer <a href="http://www.smashingmagazine.com/2008/05/02/improving-code-readability-with-css-styleguides/" rel="nofollow noreferrer">Gaius\'s question</a> 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 &amp; 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 &amp; size:</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>.mywidth {\r\n  width: 35em;\r\n  font-family: Verdana;\r\n  font-size: 1em;\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" class="mywidth"/&gt;&lt;br/&gt;\r\n&lt;textarea class="mywidth"&gt;&lt;/textarea&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p>Hope that helps.</p>\n'}, {'answer_id': 167121, 'author': 'Boris Callens', 'author_id': 11333, 'author_profile': 'https://Stackoverflow.com/users/11333', 'pm_score': 0, 'selected': False, 'text': '<p>As mentioned in <a href="https://stackoverflow.com/questions/161915/unequal-html-textbox-and-dropdown-width-with-xhtml-10-strict">Unequal Html textbox and dropdown width with XHTML 1.0 strict</a> it also depends on your doctype.\nI have noticed that when using XHTML 1.0 strict, the difference in width does indeed appear.</p>\n'}, {'answer_id': 17811701, 'author': 'vitaj', 'author_id': 2610809, 'author_profile': 'https://Stackoverflow.com/users/2610809', 'pm_score': -1, 'selected': False, 'text': '<p>you can also use the following\nCSS: </p>\n\n<pre><code>.mywidth{\nwidth:100px;\n}\ntextarea{\nwidth:100px;\n}\n</code></pre>\n\n<p>HTML:</p>\n\n<pre><code>&lt;input class="mywidth" &gt;\n&lt;textarea&gt;&lt;/textarea&gt;\n</code></pre>\n'}, {'answer_id': 24154873, 'author': 'Justin', 'author_id': 922522, 'author_profile': 'https://Stackoverflow.com/users/922522', 'pm_score': 2, 'selected': False, 'text': '<p>Use CSS3 to make textbox and input work the same. See <a href="http://jsfiddle.net/68Z5J/" rel="nofollow">jsFiddle</a>.</p>\n\n<pre class="lang-css prettyprint-override"><code>.textarea, .textbox {\n    width: 200px;\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box; \n}\n</code></pre>\n'}, {'answer_id': 24937975, 'author': 'themeindia.org', 'author_id': 3873639, 'author_profile': 'https://Stackoverflow.com/users/3873639', 'pm_score': 0, 'selected': False, 'text': '<pre><code>input[type="text"] { width: 60%; } \ninput[type="email"] { width: 60%; }\ntextarea { width: 60%; }\ntextarea { height: 40%; }\n</code></pre>\n'}, {'answer_id': 50309496, 'author': 'Kurt Van den Branden', 'author_id': 4746087, 'author_profile': 'https://Stackoverflow.com/users/4746087', 'pm_score': 0, 'selected': False, 'text': '<p>These days, if you use bootstrap, simply give your input fields the <code>form-control</code> class. Something like:</p>\n\n<pre><code>&lt;label for="display-name"&gt;Display name&lt;/label&gt;\n&lt;input type="text" class="form-control" name="displayname" placeholder=""&gt;\n\n&lt;label for="about-me"&gt;About me&lt;/label&gt;\n&lt;textarea class="form-control" rows="5" id="about-me" name="aboutMe"&gt;&lt;/textarea&gt;\n</code></pre>\n'}]
['https://Stackoverflow.com/questions/28713', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/276/']