What is it in the CSS/DOM that prevents an input box with display: block from expanding to the size of its container

Alright, due to the clarification of the original question...I did some digging and found these laments and this article.

There are a few elements (<input>, <select>, <button>, <img>, <object>, and <textarea>) that are considered replaced elements whose appearance and dimensions are defined by an external resource. (e.g. the operating system, a plugin, etc)

Replaced elements can have intrinsic dimensions—width and height values that are defined by the element itself, rather than by its surroundings in the document. For example, if an image element has a width set to auto, the width of the linked image file will be used. Intrinsic dimensions also define an intrinsic ratio that’s used to determine the computed dimensions of the element should only one dimension be specified. For example, if only the width is specified for an image element—at, say, 100px—and the actual image is 200 pixels wide and 100 pixels high, the height of the element will be scaled by the same amount, to 50px.

Replaced elements can also have visual formatting requirements imposed by the element, outside of the control of CSS; for example, the user interface controls rendered for form elements.

W3C's CSS 2.1 "Visual Formatting Model Details" section discusses the calculation of widths of both replaced and non-replaced elements.

Overall...pretty annoying for some form elements (<textarea>, <button>, and <input>). Can/will it change? Probably not any time soon...Until it does change at the core, we'll have to stick with the hacks :(


You can accomplish this by making use of the box-sizing CSS property on the input box:

input {
    display: block;
    width: 100%;
    box-sizing: border-box; /* CSS3 */
    -moz-box-sizing: border-box; /* Firefox */
    -ms-box-sizing: border-box; /* IE8 */
    -webkit-box-sizing: border-box; /* Safari */
    -khtml-box-sizing: border-box; /* Konqueror */
}

Additionally, to get it to work with IE6 & IE7, you'll need to throw this in your HTML:

<!--[if lt IE 8]><style>input{behavior:url("boxsizing.htc");}</style><![endif]-->

See it in action, here.

Get the boxsizing.htc here.

SpliFF's post was my source a while back and I've used it a couple times since.

Tags:

Css