Existe um recurso nos browsers baseados em Webkit, e recentemente no Firefox 4, que permite que um textarea possa ser redimensionado pelo usuário de acordo com sua necessidade. Esses browsers habilitam um ícone no canto inferior direito.
Em alguns sites esta funcionalidade pode não ser muito bem vinda, pois é muito provável que depois de redimensionado o layout não fique esteticamente agradável.

Para o elemento textarea existe a propriedade resize que suporta os seguintes valores:

  • both, valor padrão;
  • horizontal, permite apenas o redimensionamento horizontal;
  • vertical, permite apenas o redimensionamento vertical;
  • none, remove o ícone e inibe o recurso.

A partir disso temos as seguintes soluções:


1ª Solução – Drástica

textarea { resize: none }

2ª Solução – Crie uma classe e remova a suporte apenas dos textareas específicos

textarea.resizeNo { resize: none }

3ª Solução – Especifique as propriedades max-width e max-height

textarea { max-width: 100px; max-height: 100px; }

4ª Solução – Especifique o valor vertical ou horizontal na propriedade resize

textarea { resize:vertical; }

Lógico a casos e casos, devemos ter uma sensibilidade para saber quando podemos desabilitar esse recurso.
Até a próxima!

Sobre Erick

Erick de Oliveira escreveu 19 artigos no blog.

Tagged with →  
Share →

5 Responses to Desabilitando o redimensionamento do textarea

  1. Maurício says:

    A solução n.1 seria o ideal, apesar de eu não considerar tão drástica, pois o recurso de redimensionamento não é algo “necessário”, no meu ponto de vista.

  2. Fagner says:

    Boa mano, mandou muito bem eu estava procurando uma forma pra resolver este problema, por que sempre quebra o desining das minhas divis. vlw mano (y)

  3. Lucas says:

    kkkkkkkkkkkkkkkkkkkkkkk TEXTEAREA , TEXTTREA …. só eu vii isso? 

  4. Elyson says:

    Valeow !!! Ps: A caixa de comentario aqui ta sem o resize

  5. Matheus says:

    Usei a solu??????o 1 e funcionou corretamente… muito obrigado!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>