seleccionar - selectores css

¿Es posible aplicar un estilo a una entrada de texto para llenar el ancho de su padre?

Question

He tenido este problema durante años y he visto preguntas similares antes, pero ninguno de ellos ha abordado el hecho de que al configurar el width: 100% en un elemento: los rellenos, márgenes y bordes aumentarán el ancho.

Echa un vistazo a este Fiddle .

El cuadro de texto superior blanco es un cuadro de texto estándar con un ancho establecido en 100% . Como puede ver, se desborda, se debe a la configuración de margen, relleno y borde.

El cuadro de texto verde tiene el estilo de un div usando position: absolute . Esto funciona como un sueño en los navegadores webkit pero en ninguna otra parte.

El div rojo es el control, quiero que la entrada actúe así .

¿Hay algún truco o truco que pueda usar para que mis entradas de texto actúen como la división roja en todos los navegadores modernos, en otras palabras, encajan dentro del relleno del padre? Edite mi Fiddle o cree el suyo propio para acompañar su respuesta. ¡Gracias!

Answer 1

Prueba con display:table-cell propiedad display:table-cell

  display:table;
  display:table-cell;

te puede ayudar

por favor revise este enlace

Elemento de entrada de estilo para llenar el ancho restante de su contenedor

Answer 2

Usando calc para compensar el margen y box-sizing de la box-sizing para el relleno

input#classic
{
    padding: 5px;
    margin: 5px;
    width: -webkit-calc(100% - 10px);
    width: -moz-calc(100% - 10px);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

FIDDLE

Answer 3

Usted puede:

input#classic
{
    width: 100%;
    padding: 5px;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;        
}

Demostración de JS Fiddle .

Tenga en cuenta que eliminé el margin , ya que causaba un desbordamiento, y configuré el box-sizing la box-sizing para determinar el ancho del elemento, incluido el ancho de los bordes y el relleno.