Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Textarea 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 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.)

like image 976
Qaz Avatar asked Jul 03 '14 18:07

Qaz


People also ask

Is textarea same as input?

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).

How do I fix the width of my textarea?

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.

Why is textarea not an input type?

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.


1 Answers

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.

like image 127
Nicholas Hazel Avatar answered Sep 20 '22 02:09

Nicholas Hazel