Conectasul agora é Conectahost! Entenda o que mudou e por que faz sentido. Clique aqui!

Remover o resize do textarea: Saiba como manipular o resize via CSS

Remover o resize do textarea: Saiba como manipular o resize via CSS

Resize textarea

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:

Exemplo de textarea com resize
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; }
Textarea sem resize
Textarea sem resize

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! 😉