Consideremos el resultado final presentado al usuario de lo que queremos lograr: un área de texto acolchada con un borde y un relleno, cuyas características son que al hacer clic pasan el foco a nuestra área de texto y la ventaja de un ancho automático del 100% típico de los elementos de bloque.
El mejor enfoque en mi opinión es utilizar soluciones de bajo nivel en la medida de lo posible, para alcanzar el máximo soporte de navegadores. En este caso, el único HTML podría funcionar bien, evitando el uso de Javascript (que de todos modos todos amamos).
La etiqueta LABEL viene en nuestra ayuda porque tiene ese comportamiento y puede contener los elementos de entrada a los que debe dirigirse. Su estilo predeterminado es el de los elementos en línea, por lo que, al darle a la etiqueta un estilo de visualización de bloque, podemos aprovechar el ancho automático del 100%, incluido el relleno y los bordes, mientras que el área de texto interna no tiene borde, relleno y un ancho del 100% .
Echando un vistazo a los detalles específicos del W3C, otras ventajas que podemos notar son:
- no se necesita ningún atributo "for": cuando una etiqueta LABEL contiene la entrada de destino, automáticamente enfoca la entrada secundaria cuando se hace clic;
- Si ya se ha diseñado una etiqueta externa para el área de texto, no se producen conflictos, ya que una entrada determinada puede tener una o más etiquetas.
Consulte los detalles del W3C para obtener información más detallada.
Ejemplo simple:
.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;
}
<body>
<div class="container">
I am the container
<label class="textareaContainer">
<textarea name="text">I am the padded textarea with a styled border...</textarea>
</label>
</div>
</body>
El relleno y el borde de los elementos .textareaContainer son los que queremos dar al área de texto. Intenta editarlos para darle el estilo que quieras. Le di un relleno y bordes grandes y visibles al elemento .textareaContainer para que pueda ver su comportamiento al hacer clic.