291 votos

¿Cómo puedo hacer un TextArea 100% ancho sin desbordarse cuando el relleno está presente en CSS?

Tengo el siguiente fragmento de código HTML que se queden.

 <div style="display: block;" id="rulesformitem" class="formitem">
    <label for="rules" id="ruleslabel">Rules:</label>
    <textarea cols="2" rows="10" id="rules"/>
</div>
 

Este es mi CSS:

 textarea
{
    border:1px solid #999999;
    width:100%;
    margin:5px 0;
    padding:3px;
}
 

¿El problema es que el área de texto termina siendo 8px más amplio (2px para la frontera 6px para el relleno) no sea el padre. ¿Hay una manera de seguir utilizando la frontera y el relleno, pero restringir el tamaño total del textarea de la anchura de la matriz?

486voto

beatngu Puntos 4072

Por qué no? Olvídate de los hacks y justo hacerlo con CSS?

Que yo uso con frecuencia:

 .boxsizingBorder {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
 

Compatibilidad con navegadores: http://caniuse.com/css3-boxsizing

59voto

Dave Sherohman Puntos 25122

La respuesta a muchos problemas de formato CSS parece ser "agregar otro <div>!"

Así, en ese espíritu, ¿ha intentado añadir un div contenedor al que se aplica la frontera / el relleno y luego poner el ancho de textarea 100% dentro de eso? Algo así como (no probado):

 textarea
{
    width:100%;
}
.textwrapper
{
    border:1px solid #999999;
    margin:5px 0;
    padding:3px;
}

<div style="display: block;" id="rulesformitem" class="formitem">
    <label for="rules" id="ruleslabel">Rules:</label>
    <div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div>
</div>
 

17voto


vamos a considerar el resultado final prestados al usuario de lo que queremos lograr: un collar de textarea con un borde y un relleno, cuáles son las características que el que se hace clic se pasa el foco a nuestro textarea, y la ventaja de un sistema automático de 100% de la anchura típica de los elementos de bloque.

El mejor enfoque, en mi opinión, es el uso de bajo nivel de soluciones a la medida de lo posible, para alcanzar el máximo de los navegadores soportan. En este caso, la única HTML podrían funcionar bien, evitando el uso de Javascript (que de todos modos a todos nos gusta).

La ETIQUETA viene en nuestra ayuda porque tiene este tipo de comportamiento y se le permite contener los elementos de entrada se debe enfrentar. Su estilo por defecto es el uno de los elementos en línea, por lo que, dando a la etiqueta de un bloque de estilo de visualización podemos valernos de la automática el 100% de ancho incluyendo el relleno y los bordes, mientras que el interior textarea no tiene borde sin relleno y un 100% de ancho.

Echando un vistazo a las especificaciones de la W3C otras ventajas que podemos observar son:

  • ningún atributo "for" es necesaria: cuando una ETIQUETA de título contiene el destino de entrada, enfoca automáticamente el hijo de entrada cuando se hace clic;
  • si una etiqueta externa para el textarea ya ha sido diseñado, no se producen conflictos, ya que una entrada puede tener una o más etiquetas.

Ver W3C especificaciones para obtener información más detallada: http://www.w3.org/TR/html401/interact/forms.html#h-17.9.1

Ejemplo Simple:


<html>
<head>
<style type="text/css">
.container { width: 400px; border: 3px solid #f7c; }
.textareaContainer {
    display: block;
    border: 3px solid #38c;
    padding: 10px;
}
textarea { width: 100%; margin: 0; padding: 0; border-width: 0; }
</style>
</head>

El relleno y el borde de los .textareaContainer elementos son los que queremos transmitir a la caja de texto. Trate de edición de ellos, el estilo de ella como quieras. Me dio grandes y visibles de relleno y los bordes de la .textareaContainer elemento que permite ver su comportamiento cuando se hace clic.

13voto

qui Puntos 5259

Si usted no está demasiado molesto acerca de la anchura del relleno, esta solución realmente mantener el relleno en porcentajes también ..

 textarea
{
    border:1px solid #999999;
    width:98%;
    margin:5px 0;
    padding:1%;
}
 

No es perfecto, pero usted conseguirá un poco de relleno y el ancho se suma a 100% en lo que todo es bueno

8voto

Brian Puntos 291

Me encontré otra solución aquí es muy sencilla: agregar relleno-derecho a la textarea del contenedor. Esto mantiene al margen, borde y relleno en el textarea, que evita el problema de que Beck señaló sobre el enfoque de relieve que el chrome y safari poner alrededor de la caja de texto.

El contenedor de relleno de derecho debe ser la suma de los efectivos de margen, borde y relleno a ambos lados de la caja de texto, además de cualquier relleno que de otra manera puede que desee para el contenedor. Así, para el caso de que en la pregunta original:

textarea{
    border:1px solid #999999;
    width:100%;
    margin:5px 0;
    padding:3px;
}
.textareacontainer{
    padding-right: 8px; /* 1 + 3 + 3 + 1 */
}

<div class="textareacontainer">
    <textarea></textarea>
</div>

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: