¿Puedo evitar que los Cuadros de Texto de 100% de Ancho se extiendan más allá de sus contenedores?

¿Hay alguna manera de hacer que un cuadro de texto llene el ancho de su contenedor sin expandirse más allá de él?

Sí: al usar la propiedad CSS3 'box-sizing: border-box', puede redefinir lo que 'width' significa para incluir el relleno externo y el borde.

Desafortunadamente, debido a que es CSS3, el soporte no está muy maduro, y como el proceso de especificaciones aún no ha terminado, tiene diferentes nombres temporales en los navegadores mientras tanto. Entonces:

input.wide {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

La alternativa de la vieja escuela es simplemente para poner una cantidad de 'padding-right' en el elemento

Esto resolvió el problema para mí!

Sin necesidad de un div externo. Simplemente aplíquelo a su cuadro de texto dado.

box-sizing: border-box; 

Con esta propiedad"Las propiedades width y height (y las propiedades min/max) incluyen contenido, relleno y borde, pero no el margen"

Ver descripción de la propiedad en w3schools.

Espero que esto ayude a alguien!

Acabo de encontrar este problema yo mismo, y la única solución que pude encontrar que funcionó en todos mis navegadores de prueba (IE6, IE7, Firefox) fue la siguiente:

1. Envuelva el campo de entrada en dos DIVs separados
2. Establezca el DIV exterior en ancho 100%, esto evita que nuestro contenedor se desborde el documento
3. Coloque relleno en el DIV interno de la cantidad exacta para compensar el desbordamiento horizontal de la entrada.
4. Establecer relleno personalizado en la entrada para que se desborda por el la misma cantidad que permití en la división interior

El código:

<div style="width: 100%">
    <div style="padding-right: 6px;">
        <input type="text" style="width: 100%; padding: 2px; margin: 0;
                                  border : solid 1px #999" />
    </div>
</div>

Aquí, el desbordamiento horizontal total para el elemento de entrada es 6px - 2x(padding + border) - por lo que establecemos un padding-right para el DIV interno de 6px.

El soporte de tamaño de caja es bastante bueno en realidad: http://caniuse.com/#search=box-sizing

Así que a menos que apunte a IE7, debería ser capaz de resolver este tipo de problemas usando esta propiedad. Una capa como sass o less hace que sea más fácil manejar reglas prefijadas como esa, por cierto.

En realidad, es porque CSS define el 100% en relación con todo el ancho del contenedor, incluidos sus márgenes, bordes y relleno; eso significa que el espacio está disponible. a su contenido es una cantidad menor que 100%, a menos que el contenedor no tenga márgenes, bordes o relleno.

Esto es contra-intuitivo y ampliamente considerado por muchos como un error con el que ahora estamos atrapados . Significa efectivamente que % dimensions no es bueno para nada más que un contenedor de nivel superior, e incluso entonces, solo si no tiene márgenes, bordes o relleno.

Tenga en cuenta que los márgenes, bordes y relleno del campo de texto están incluidos en el tamaño CSS especificado para él: son los contenedores los que arrojan las cosas.

He trabajado tolerablemente alrededor de él mediante el uso de 98%, pero que es una solución menos que perfecta, ya que los campos de entrada tienden a caer más corto a medida que el contenedor se hace más grande.

EDITAR: Me encontré con esta pregunta similar - Nunca he probé la respuesta dada, y no estoy seguro si se aplica a tu problema, pero parece que lo hará.

Una solución que puede funcionar (funciona para mí) es aplicar margen negativo en la entrada (cuadro de texto)... o ancho fijo para ie7 o para soltar el soporte ie7. Esto da como resultado un ancho de píxel perfecto.. Para mí es 7, así que agregué 3 y 4, pero sigue siendo pixel perfecto..

Tuve el mismo problema y odiaba tener divs adicionales para border, etc.

Así que aquí está mi solución que parece funcionar!

Debe usar una hoja de estilo solo ie7 para evitar los starhacks.

input.text{
    background-color: #fbfbfb;
    border : solid #eee 1px;
    width: 100%;
    -box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 32px;

    *line-height:32px;
    *margin-left:-3px;
    *margin-right:-4px;
    display: inline;   
    padding: 0px 0 0 5px;

}

Si no puedes usar box-sizing:border-box puedes intentar eliminar el width:100% y poner un atributo size muy grande en el elemento <input>, el inconveniente es que sin embargo tienes que modificar el html, y no puedes hacerlo solo con CSS:

<input size="1000"></input>

Si no necesita hacerlo dinámicamente (por ejemplo, su formulario es de un ancho fijo), puede establecer el ancho de los elementos secundarios <input> al ancho de su contenedor menos cualquier decoración como relleno, margen, borde, etc.:

 // the parent div here has a width of 200px:
.form-signin input[type="text"], .form-signin input[type="password"], .form-signin input[type="email"], .form-signin input[type="number"] {
  font-size: 16px;
  height: auto;
  display: block;
  width: 280px;
  margin-bottom: 15px;
  padding: 7px 9px;
}

Si no puede usar el tamaño de la caja (por ejemplo, cuando convierte HTML a PDF usando iText). Prueba esto:

CSS

.input-wrapper { border: 1px solid #ccc; padding: 0 5px; min-height: 20px; } 
.input-wrapper input[type=text] { border: none; height: 20px; width: 100%; padding: 0; margin: 0; }

HTML

<div class="input-wrapper">
     <input type="text" value="" name="city"/>
</div>

Esto funciona:

<div>
    <input type="text" 
        style="margin: 5px; padding: 4px; border: 1px solid; 
        width: 200px; width: calc(100% - 20px);">
</div>

El primer 'ancho' es una regla de reserva para navegadores antiguos.

Simplemente dale estilo a la entrada para compensar el relleno adicional. En el siguiente ejemplo, el relleno en la entrada sería 10px a la izquierda y a la derecha para un desplazamiento total de relleno de 20px:

input[type=text]{
   width: calc(100% - 20px);
}