vamos considerar a saída final renderizada ao usuário do que queremos alcançar: uma área de texto preenchida com borda e preenchimento, cujas características são clicadas, elas passam o foco para nossa área de texto e a vantagem de uma largura automática de 100% típico de elementos de bloco.
A melhor abordagem, na minha opinião, é usar soluções de baixo nível, na medida do possível, para alcançar o suporte máximo aos navegadores. Nesse caso, o único HTML poderia funcionar bem, evitando o uso de Javascript (que de qualquer maneira todos gostamos).
A tag LABEL vem em nossa ajuda porque tem esse comportamento e pode conter os elementos de entrada aos quais deve ser endereçada. Seu estilo padrão é o dos elementos inline, portanto, dando ao rótulo um estilo de exibição de bloco, podemos aproveitar a largura automática de 100%, incluindo preenchimento e bordas, enquanto a área de texto interna não possui borda, preenchimento e largura de 100% .
Examinando as especificidades do W3C, outras vantagens que podemos notar são:
- nenhum atributo "for" é necessário: quando uma tag LABEL contém a entrada de destino, ela focaliza automaticamente a entrada filho quando clicada;
- se um rótulo externo para a área de texto já tiver sido projetado, nenhum conflito ocorrerá, pois uma determinada entrada pode ter um ou mais rótulos.
Consulte as especificações do W3C para obter informações mais detalhadas.
Exemplo simples:
.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>
O preenchimento e a borda dos elementos .textareaContainer são os que queremos fornecer à área de texto. Tente editá-los para estilizá-lo como quiser. Dei preenchimento e bordas grandes e visíveis ao elemento .textareaContainer para permitir que você veja o comportamento deles quando clicado.