SEO Florianópolis

Artigos e Discussões sobre SEO

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

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

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

8 Comments

Post a comment