Olá, pessoal!
Espero poder contribuir com seu conhecimento, então boa leitura.
Remover o resize do textarea: Em um dia normal na Agência Digital onde eu trabalho nos deparamos com o seguinte problema de um de nossos clientes.
A solicitação foi a seguinte:
Meu site está com a página de contato “quebrando” quando eu redimensiono o textarea e agora? Como resolver isso?
Em um bate-papo com parte de nossa equipe de desenvolvimento @antonioiae e @kakastefanegt foi sugerido setar as propriedades “max-width” e “max-height” na prática funciona muito bem, porém a gente apenas bloqueou o resize e não o removemos.
E aí, como remover o resize do textarea via css?
O problema do resize do textarea
Os navegadores como Firefox, Chrome e Safari por padrão eles exibem a opção para redimensionar o textarea, ou seja, exibem o ícone para manipular o tamanho da caixa de texto.
Vejamos um exemplo:
<form action="#" method="post">
<fieldset>
<legend>Textarea</legend>
<label for="mensagem">Mensagem</label>
<textarea id="mensagem" name="mensagem" rows="5" cols="30"></textarea>
</fieldset>
</form>
Exemplo de textarea com resize:
A solução para remover o resize do texarea
Com o CSS é possível manipular o resize para que ele tenha um comportamento de redimensionamento vertical, horizontal ou none (nenhum).
Exemplo de textarea sem resize:
form textarea { resize:none; }
Conclusão
Em alguns casos o resize do textarea poderá ser muito útil no seu desenvolvimento HTML e CSS.
Um bom exemplo seria o caso de se ter um blog, e na seção de comentário setar o resize vertical, possibilitando ao usuário que pretende digitar um nível de texto maior, ter uma visão mais ampla do conteúdo dentro do textarea.
Bom, eu espero que essa simples dica seja útil no seu dia a dia de front-end.
Obrigado e até a próxima! 😉
