CSS:
textarea, input {
width:300px;
}
HTML:
<textarea id="input"></textarea>
<br>
<input type="submit">
Live Demo: http://codepen.io/qaz/pen/teaiG
Why do the input and textarea display with different widths? What properties do I need to add to make them the same width?
UPDATE: By setting border and padding to 0px, I can make them display at the same width. Nobody wants padding:0px, though, and, strangely, when the padding is, say, 10px for both, they aren't the same width anymore. Now that I've found a solution with padding:0px, I'm still interested in an explanation and a solution that allows me still to have padding.
(I'm using Chrome 35 on Windows 7.)
Generally speaking an input field is a one-line field (probably to carry something like first name or last name, a phone number, an email). A textarea is a multi-line field that allows you to press ENTER! They are used for addresses or others long and complex type of data (also notes, for instance).
To prevent a text field from being resized, you can use the CSS resize property with its "none" value. After it you can use the height and width properties to define a fixed height and width for your <textarea> element.
A textarea can contain multiple lines of text, so one wouldn't be able to pre-populate it using a value attribute. Similarly, the select element needs to be its own element to accommodate option sub-elements.
Try setting it like this:
textarea, input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
http://jsfiddle.net/QV9PE/
The box-sizing CSS3 property can do just this. The border-box value (as opposed to the content-box default) makes the final rendered box the declared width, and any border and padding cut inside the box.
We can now safely declare our textarea to be of 300px width, including pixel-based padding and border, and accomplish out layout perfectly.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With