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.
