Problema con <input type = 'text' /> y <textarea> width

En el siguiente código, tanto los elementos INPUT como TEXTAREA se vuelven más amplios de lo que deberían. ¿Cómo puedo limitarlos al 100% del área utilizable dentro del div?Problema con <input type = 'text' /> y <textarea> width

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <style> 
     .mywidth{ width:100%; } 
    </style> 
</head> 
<body> 
    <div style="border: 3px solid green; width: 100px;"> 
     <input class="mywidth" ><br /> 
     <textarea class="mywidth"></textarea><br /> 
     <div style="background-color: yellow;" class="mywidth">test</div> 
    </div> 
</body> 
</html>

Nota: Si quito el DOCTYPE, se hace como se esperaba, con la entrada, TEXTAREA y DIV interior todos la misma anchura y no ir fuera del DIV que contiene.

Actualización: No obstante los bordes predeterminados en esos elementos, todavía parece mostrarse incorrectamente en IE7.

Fuente

2008-11-03 Larsenal

entradas y áreas de texto ambos tienen fronteras por defecto

<style> 
    .mywidth{ 
    width:100%; 
    border:0; 
    } 
</style>

hará que todos los elementos dentro de su contenedor.

actualización

IE también ha dejado y el relleno a la derecha en cada elemento y el siguiente css se adapta a todos los elementos dentro del recipiente en FF3, FF2, Safari 3, IE6 y IE7.

<style> 
    .mywidth{ width:100%; border:0; padding-left:0; padding-right:0; } 
</style>

Sin embargo, no se olvide que es probable que necesite una frontera, y quizás el relleno también, con el fin de hacer que los campos que aparecen a los usuarios de forma normal. Si establece ese borde y relleno usted mismo sabrá cuál es la diferencia, entre los navegadores, entre el ancho del contenedor y el ancho que tendrá que dar a los elementos de entrada/textarea.

Fuente

2008-11-03 18:19:15 philnash

¿Lo has probado? Verifique IE7. Todavía muerde en el borde verde en el div que contiene. – Larsenal

Disculpas, ¡estoy en una Mac! Veré lo que puedo hacer en IE7. – philnash

Usted podría tratar de usar este DOCTYPE en lugar

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Fuente

2008-11-03 18:17:48

no parece solucionarlo. – Larsenal

Al no tener un DOCTYPE forzará el navegador al modo peculiar, utilizando el modelo de caja viejo e incorrecto que no considera el borde como parte del ancho. – philnash

O ... '': P –

Add "padding-right: 3px;" a la div para que se lea como:

<div style="border: 3px solid green;padding-right:3px; width: 100px;">

Debido a que haya añadido un borde a la div que también cuenta como espacio interno de la div.

La razón funciona sin la declaración doc es que el navegador no hace que la página como XHTML de transición, pero html simple y llano que tiene un método diferente para la representación de div etc.

Fuente

2008-11-03 18:23:08

@Phil tiene la respuesta, más arriba.

Por cierto, el uso de Firebug, de hecho, muestra los bordes predeterminados en el área de texto y los elementos de entrada. Entonces, usar Firebug podría haber ayudado.

Fuente

2008-11-03 18:23:40

Se ve bien en FF, pero sigue apareciendo incorrectamente en IE7. – Larsenal

xhtml código estricto parece hacer eso con los formularios. acabo de hacer que las entradas y áreas de texto se extiendan al 99% y eso parece funcionar. pruébalo.

Fuente

2009-07-18 15:03:20

Tuve este mismo problema. He utilizado la propiedad box-dimensionamiento mencionado aquí:

How can I make a TextArea 100% width without overflowing when padding is present in CSS?

Esto es lo que parecía para mí:

<style> 
    .mywidth{ 
    width:100%; 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    } 
</style>

Fuente

2010-07-22 13:24:40 bmaupin

Esto debería haber sido elegido como la respuesta correcta, ¡gracias! –

Esto no funcionará en IE7 o menos, ya que los navegadores más antiguos no son compatibles con el tamaño de la caja. Además, debe asegurarse de incluir '-ms-box-sizing' y siempre enumerar la propiedad real de CSS3 (' box-sizing') al final, de modo que una vez que los navegadores implementan la propiedad CSS real, sobrescribirá la versión específica de su proveedor. – RussellUresti

@RussellUresti: buena llamada, he actualizado mi respuesta en función de su comentario – bmaupin

Problema con <input type = 'text' /> y <textarea> width

Respuesta

Cuestiones relacionadas