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 🙁

Leave a Comment