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:
<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
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:
form textarea { resize:none; }
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! 😉
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.