Why don't <textarea> and <input> elements respect max-width?

Question

The following HTML:

Answer 1

Most browsers respect max-width, but INPUT and TEXTAREA elements typically have a width set by default in the user agent CSS. You can add this CSS for a consistent rendering:

input,textarea{width:100%;display:block}

Answer 2

Ran into this very problem this morning. While the first answer relates to mine, I feel further explanation is necessary:

Working Demo: jsFIDDLE Demo

1) As stated above, first it's important to set inputs to 100% width at the top of your css file:

input,textarea {
     width:100%;
     display:block }

2) The input will now, by default, extent 100% of the length of the parent div. So if you want to achieve a "max-width," you need to set width properties within the parent div.

.input-container {
     max-width: 300px; }

3) Add padding to the parent div to give a fixed space to the right/left of the input

.input-container {
     padding: 25px 25px;
     max-width: 300px; }

Let me know if something isn't clear.

jsFIDDLE Demo

Answer 3

A div - like any other block-element - generally takes 100% of the available width. Because you limited the width (with max-width) to 200px, the div will have 200px. <textarea> and <input> are inline elements. They still have a width, because every element has a default width.

To solve your problem: if you want the <textarea>and <input> fields to be as wide as your div, you'll have to change the width-attribute, not the max-width one. Leaving out the "max" will make them all equally wide.