lineas - CSS: cuadro de texto para llenar el contenedor principal

etiquetas css

Question

Estoy tratando de dejar que un <input type="text"> (en adelante referido como "textbox") llene un contenedor principal configurando su width al 100% . Esto funciona hasta que le dé al cuadro de texto un relleno. Esto se agrega al ancho del contenido y el campo de entrada se desborda. Tenga en cuenta que en Firefox esto solo ocurre cuando el contenido se muestra conforme a los estándares. En el modo peculiar, parece aplicarse otro modelo de caja.

Aquí hay un código mínimo para reproducir el comportamiento en todos los navegadores modernos.

#x {
  background: salmon;
  padding: 1em;
}

#y, input {
  background: red;
  padding: 0 20px;
  width: 100%;
}

<div id="x">
  <div id="y">x</div>
  <input type="text"/>
</div>

Mi pregunta: ¿Cómo obtengo el cuadro de texto para que se ajuste al contenedor?

Aviso : para el <div id="y"> , esto es sencillo: simplemente configure width: auto . Sin embargo, si trato de hacer esto para el cuadro de texto, el efecto es diferente y el cuadro de texto toma su conteo de fila predeterminado como ancho (incluso si configuro display: block para el cuadro de texto).

/ EDITAR: La "solución" de David, por supuesto, funcionaría. Sin embargo, no quiero modificar el HTML, especialmente no quiero agregar elementos ficticios sin funcionalidad semántica. Este es un caso típico de divinidad que quiero evitar a toda costa. Esto solo puede ser un truco de último recurso.

Answer 1

@Domenic esto no funciona. el ancho automático no hace nada más que el comportamiento predeterminado de ese elemento porque el valor inicial del ancho es automático (consulte la página 164, Especificaciones de nivel 2 de la revisión en cascada de hojas de estilo en cascada). Tampoco funciona asignar una pantalla de tipo bloque, esto simplemente indica al navegador que use un cuadro de bloque cuando se muestra el elemento y no asigna un comportamiento predeterminado de tomar el mayor espacio posible como lo hace un div (consulte la página 121, Estilo en cascada Sheets Nivel 2 Revisión 1 Especificación). Ese comportamiento lo maneja el agente de usuario visual, no la definición de CSS o HTML.

Answer 2

Con CSS3 puede usar la propiedad de tamaño de caja en sus entradas para estandarizar sus modelos de cajas. Algo así le permitiría agregar relleno y tener un ancho del 100%:

input[type="text"] {
    -webkit-box-sizing: border-box; // Safari/Chrome, other WebKit
    -moz-box-sizing: border-box;    // Firefox, other Gecko
    box-sizing: border-box;         // Opera/IE 8+
}

Desafortunadamente, esto no funcionará para IE6 / 7, pero el resto está bien ( Lista de compatibilidad ), por lo que si necesita admitir estos navegadores, su mejor opción sería la solución de David.

Si quieres leer más echa un vistazo a este artículo brillante de Chris Coyier .

¡Espero que esto ayude!

Answer 3

Creo que puedes contrarrestar el desbordamiento con un margen negativo. es decir

margin: -1em;

Answer 4

Debido a la forma en que se define e implementa Box-Modell , no creo que haya una solución de solo css para este problema. (Aparte de lo que Matthew describió: usar porcentaje para el relleno también, por ejemplo, ancho: 94%; relleno: 0 3%;)

Sin embargo, podría construir algún código Javascript para calcular el ancho dinámicamente en la carga de la página ... hm, y ese valor también debería actualizarse cada vez que se cambia el tamaño de la ventana del navegador.

Interesante subproducto de algunas pruebas que he hecho: Firefox establece el ancho de un campo de entrada al 100% si además de width: 100%; también estableces el ancho máximo al 100%. Sin embargo, esto no funciona en Opera 9.5 o IE 7 (no se han probado versiones anteriores).

Answer 5

Desafortunadamente, esto no es posible con CSS puro; Las modificaciones de HTML o Javascript son necesarias para cualquier comportamiento de UI no trivial, pero limitado. Las columnas de CSS3 ayudarán en este sentido de alguna manera, pero no en escenarios como el suyo.

La solución de David es la más limpia. En realidad, no es un caso de divitis: no estás agregando un montón de div innecesariamente o dándoles nombres de clase como "p" y "h1". Está cumpliendo un propósito específico, y lo bueno en este caso es que también es una solución extensible, por ejemplo, puede agregar esquinas redondeadas en cualquier momento sin agregar nada más. La accesibilidad tampoco se ve afectada, ya que son divs vacíos.

Fwiw, así es como implemento todos mis cuadros de texto:

<div class="textbox" id="username">
    <div class="before"></div>
    <div class="during">
        <input type="text" value="" />
    </div>
    <div class="after"></div>
</div>

Ahora puede usar CSS para agregar esquinas redondeadas, agregar relleno como en su caso, etc., pero tampoco tiene que hacerlo; puede ocultar esos divisores laterales por completo y solo tiene un cuadro de texto de entrada regular. .

Otras soluciones son usar tablas, por ejemplo, Amazon usa tablas para obtener un diseño flexible pero limitado, o usar Javascript para modificar los tamaños y actualizarlos en el tamaño de las ventanas, por ejemplo, Google Docs, Maps, etc. todos hacen esto.

De todos modos, mis dos centavos: no deje que el idealismo se interponga en el camino de la practicidad en casos como este. :) La solución de David funciona y apenas complica el HTML en absoluto (y de hecho, el uso de nombres semánticos como "antes" y "después" todavía está muy limpio).

Answer 6

El relleno y el borde predeterminados evitarán que su cuadro de texto sea verdaderamente del 100%, por lo que primero debe establecerlos en 0:

input {
    background: red;
    padding: 0;
    width: 100%;
    border: 0; //use 0 instead of "none" for ie7 
}

Luego, ponga su borde y cualquier relleno o margen que desee en un div alrededor del cuadro de texto:

.text-box {
    padding: 0 20px;
    border: solid 1px #000000;
}

<body>
    <div id="x">
        <div id="y">x</div>
        <div class="text-box"><input type="text"/></div>
    </div>
</body>

Esto debería permitir que su cuadro de texto sea expansible y el tamaño exacto que desee sin javascript.

Answer 7

Este comportamiento es causado por las diferentes interpretaciones del modelo de caja. El modelo de caja correcto indica que el ancho se aplica solo al contenido y al margen y al margen agregarlo. Por lo tanto, obtendrás un margen de 100% más un margen derecho e izquierdo de 20 píxeles igual a 100% + 40 píxeles como ancho total. El modelo original de IE Box, también conocido como modo peculiar, incluye relleno y margen en el ancho. Entonces, el ancho de su contenido sería 100% - 40px en este caso. Es por eso que ves dos comportamientos diferentes. Hasta donde yo sé, no hay solución para esto, sin embargo, hay un trabajo alrededor al establecer el ancho para decir el 98% y el relleno al 1% en cada lado.

Answer 8

Puede rodear el cuadro de texto con un <div> y darle ese <div> padding: 0 20px . Su problema es que el ancho del 100% no incluye ningún valor de margen o margen; estos valores se agregan sobre el ancho del 100%, por lo tanto, el desbordamiento.