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

Question

Sample HTML/CSS:

    
    



div.container         


        

Answer 1

As far as I know, the default length of the input text field is 20 characters.

I guess that's the value it gets when you set it to auto. Usually it is not useful to have a text field of the size of width of the screen, that's why I guess it defaults to 20 characters in auto.

Anyway, it should be better to check the w3c standard, or get a response from some browser developer.

Answer 2

I have some findings on newly HTML spec:

1. <input type="text"> elements are non-replaced elements.

   MDN:replaced element

2. <input type="text"> should adjust the width according to its size attribute by default, if it does not have size attribute (unlimited input length), adjust width with 20 characters:

   HTML 5.2:The input element as a text entry widget

   HTML Living Standard:The input element as a text entry widget

   If an input element whose type attribute is in one of the above states(Text, Search, Telephone, URL, or E-mail) has a size attribute, and parsing that attribute's value using the rules for parsing non-negative integers doesn't generate an error, then the user agent is expected to use the attribute as a presentational hint for the 'width' property on the element, with the value obtained from applying the converting a character width to pixels algorithm to the value of the attribute.

   If an input element whose type attribute is in one of the above states does not have a size attribute, then the user agent is expected to act as if it had a user-agent-level style sheet rule setting the 'width' property on the element to the value obtained from applying the converting a character width to pixels algorithm to the number 20.

Answer 3

if you want that the input element has the same width as div.filter, and if div.filter has the same width of div.container you can set width: 100% on input box.

Answer 4

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.

Answer 5

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 :(