html - style - texto desbordado css

CSS Contiene el texto de entrada al 100% de ancho

Question

Entonces, cuando establezco la entrada como en este ejemplo, el cuadro de texto, porque tiene un borde y un relleno por defecto, será más ancho que 200px.

<div style="width:200px; background-color:red;">
    <input type="text" name="fname" style="width:100%;"/>
</div>

Sé que puedo forzar el cuadro de texto para que quepa dentro de 200px estableciendo una clase en la etiqueta de entrada y etiquetándolo con este CSS

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;    
box-sizing: border-box;

¿Hay una mejor manera de hacer que este cuadro de texto se dimensione correctamente, es decir, rellenar el 100% como quiero que lo haga? No puedo usar tamaños fijos. Estoy usando temas CSS, por lo que no se conocen el relleno del cuadro de texto, los márgenes, etc. en el momento de la compilación. Pueden ser cambiados por el usuario sobre la marcha. Por lo tanto, la solución debe funcionar independientemente del relleno, el borde y el margen del cuadro de texto.

Answer 1

Sí. Usted puede hacerlo

Puede hacerlo sin usar box-sizing y no soluciones claras como el width~=99% . Demo en jsFiddle :

Marcado HTML:

<div class="input_wrap">
    <input type="text" />
</div>

CSS:

div {
    padding: 6px 17px; /* equal to negative input''s margin for mimic normal `div` box-sizing */
}

input {
    width: 100%; /* force to expand to container''s width */ 
    border: 7px solid #DFDFDF;  
    padding: 0 10px;
    margin: 0 -17px; /* negative margin = border-width + horizontal padding */ 
}   

Answer 2

Creo que ya has respondido tu propia pregunta. box-sizing: border-box; es realmente el único medio CSS de hacer que el elemento encaje dentro de su elemento primario. css-tricks entra en gran detalle sobre esto aquí.

http://css-tricks.com/box-sizing/

No conozco ningún otro CSS que pueda usar aparte del uso de javascript para realizar algunos cálculos y luego modificar los elementos de entrada.

Answer 3

<div style="width:200px; background-color:red;">
    <input type="text" name="fname" style="width:100%;border:1px;padding:4px;margin:-5px"/>
</div>

Answer 4

<div style="width:200px; height:22px; background-color:red;">
    <input type="text" name="fname" style="width:97%;margin-left:1%;"/>
</div>

?

Pero en serio, sin embargo, aquí hay un jsfiddle .