Como redimensionar Textarea em CSS

O elemento <textarea> é muito utilizado para entradas de texto mais longas, e o CSS permite personalizar seu tamanho e comportamento de redimensionamento. É um identificador usado para criar uma área de texto com múltiplas linhas, que também tem como opção a inclusão de conteúdos “default” na área de texto. Essas áreas possuem barras de rolagem (caso seja necessário) e um redimensionador. Neste post veja como redimensionar Textarea em CSS.

1. Definir tamanho fixo de Textarea

Para definir a altura e largura fixas da textarea:

textarea {
  width: 300px;
  height: 150px;
}

2. Tornar a Textarea redimensionável

O CSS permite controlar se a textarea pode ou não ser redimensionada pelo usuário:

textarea {
  resize: both; /* permite redimensionar horizontal e verticalmente */
}

3. Remover redimensionamento

Para desabilitar o redimensionamento, defina resize: none:

textarea {
  resize: none;
}

4. Ajustar tamanho com Flexbox ou Grid

Usando display: flex ou display: grid, você pode definir a textarea para ocupar o espaço de um container:

.container {
  display: flex;
  width: 100%;
}

textarea {
  flex: 1;
}

5. Alterar tamanho com Media Queries

Para redimensionar em diferentes telas:

textarea {
  width: 100%;
}

@media (min-width: 768px) {
  textarea {
    width: 50%;
  }
}

Outro exemplo prático

A sintaxe da área de texto requer um identificador de abertura e um de fechamento. Veja:

Código HTML/XHTML:

<TEXTAREA NAME="exemplo" ROWS=3 COLS=100>
</TEXTAREA>

Em alguns casos não é aconselhável deixar o redimensionamento de uma área de texto habilitado, pois o usuário do formulário poderá extrapolar as dimensões do mesmo, prejudicando a aparência da página.

Para resolver esse problema usamos uma linha de comando CSS bem simples. Veja:

form textarea { resize:none; }

Para que o comando acima tenha efeito basta inserí-la na página na qual o formulário se encontra:

<style rel="stylesheet" type="text/css">
  form textarea { resize:none; }
</style>

Ou invocar no documento uma folha de estilo com a linha de comando acima. 

A personalização da textarea com CSS oferece várias opções para criar formulários mais acessíveis e adaptáveis.

Experimente as técnicas para otimizar a aparência e usabilidade do seu formulário!

Dúvidas ou sugestões sobre como redimensionar Textarea em CSS? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Tags: textarea css