Como remover o resize do textarea via css?

Olá, pessoal!

Espero poder contrubuir com seu conhecimento, então boa leitura.

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 na página de contato está “quebrando” quando eu redimensiono o textarea ou campo de mensagem, 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

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 manipulação do tamanho.

Vejamos um exemplo:

Exemplo de textarea com resize

A solução

Com o CSS é possível manipular o resize para que ele tenha um comportamento de redimensionamento vertical, horizonal ou none (nenhum).

Vejamos exemplos de manipulação do resize:

Exemplo de 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.

Até a próxima! 😉

Metamídia

Ajudamos empresas a ter mais visibilidade para seu negócio, entender melhor seus clientes e trazer mais resultados. Trabalhamos com Otimização de Sites (SEO) e campanhas de conversões.