Inputfield con ancho 100% "alcanza" en relleno

Question

Tengo un mantel con un campo de entrada en él. El campo de entrada debe llenar el mantel, pero no alcanzar su relleno. Lo que me parece esto (con Firebug):

Quiero que el campo de entrada se mantenga dentro del área azul y no se ponga en la púrpura.

y: Por supuesto, leí todas las preguntas aquí en este tema primero. Leí todo y no pude encontrar ninguna respuesta que realmente resolví eso.

Debería trabajar en todos los navegadores modernos (IE7 también);

Hice una ejemplo en vivo mínimo con jsfiddle donde intenté todas las soluciones en las otras preguntas Pero simplemente no pude que esto funcione. a) ¿Hay alguna solución de trabajo para esto? y b) ¿Existe incluso una solución agradable y no servicial para esto?

¿Por qué es este un problema en todos los navegadores? Creo que esta es una especificación incorrecta en CSS. Porque si digo "100%", por supuesto, quiero que el elemento se ajuste a "100%" del área de contenido. ¿Cuál es el caso de uso para dejarlo fluir en rellenos y márgenes?

Answer 1

Well, here you go..

I'm using the exact same method as this answer.

See: http://jsfiddle.net/AKUsB/

CSS:

.inputContainer {
    background: #fff;
    padding: 3px 3px;
    border: 1px solid #a9a9a9
}
.inputContainer input {
    width: 100%;
    margin: 0; padding: 0; border: 0;
    display: block
}

HTML:

<div class="inputContainer">
    <input type="text" name="company" id="company" value="" class="formInputTextField" style="width: 100%;" />
</div>

Answer 2

The problem here is with the box model, when you say width: 100% it applies a pixel value based on what's available (which you can see under the "computed styles" option of a web inspector). However, padding is then added on to that width, so a padding of 5px would compute to a total width of 100% + 10px (5 for each side).

To fix this problem, you need to remove your padding, or incorporate it into your width value. For example:

input { width: 100%; padding: 0; }

Or

input { width: 90%; padding: 0 5%; } /* width totals 100% */

Most form elements, by default, inherit some amount of padding; so even if you're not specifically applying padding to the input, it's still on there because the browser defaults it to have padding.

Answer 3

I think you should try to use

box-sizing: border-box