Geek Answers Handbook

Text area and input have different widths

CSS

textarea, input { width:300px; }

HTML:

 <textarea id="input"></textarea> <br> <input type="submit">

Live Demo: http://codepen.io/qaz/pen/teaiG

Why are input and textarea data different in width? What properties need to be added to make them the same width?

UPDATE: By setting the border and padding to 0px, I can make them display with the same width. Nobody wants filling: 0px, although, oddly enough, when filling, say, 10px for both, they no longer have the same width. Now that I have found a solution with the add-on: 0px, I'm still interested in an explanation and a solution that allows me to still indent.

(I am using Chrome 35 on Windows 7.)

+7
css cross-browser forms
source share
2 answers

Try installing it like this:

 textarea, input { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

http://jsfiddle.net/QV9PE/

CSS3's window-size property can do just that. The border-box value (unlike the default content field) makes the final display box the declared width, and any border and padding are cut inside the field.

Now we can confidently declare that our text area has a width of 300 pixels, including indentation and pixel-based borders, and perfectly performs the layout.

+9
source share

Try using the following CSS and HTML. I do not know the theoretical answer, but here is a practical solution: http://codepen.io/anon/pen/BGeci

CSS

 textarea, input { width:300px; } input[type=submit] { width:306px; }

HTML:

  <textarea id="input"></textarea><br> <input type="text" id="input2"></textarea><br> <input type="submit">
-3
source share

More articles:


All Articles