Propriedade resize

A propriedade resize permite ou impede o redimensionamento do elemento textarea ou de outros elementos (com outros elementos não funciona em todos os navegadores).

Sintaxe

cssseletor {
  resize: both | horizontal | vertical | none;
}

Valores

Valor	Descrição
`both`	Permite redimensionar o elemento na largura e na altura.
`horizontal`	Permite redimensionar o elemento apenas na largura.
`vertical`	Permite redimensionar o elemento apenas na altura.
`none`	Não é possível redimensionar o elemento.

Valor padrão: none. Para textarea em alguns navegadores: both. Nos navegadores que não suportam resize, o textarea se comportará como se o valor none estivesse definido.

Exemplo . Valor both

O elemento é redimensionado em ambas as direções:

html<textarea></textarea>

csstextarea {
  resize: both;
  width: 200px;
  height: 200px;
}

Результат:

Exemplo . Valor horizontal

O elemento é redimensionado apenas horizontalmente:

html<textarea></textarea>

csstextarea {
  resize: horizontal;
  width: 200px;
  height: 200px;
}

Результат:

Exemplo . Valor vertical

O elemento é redimensionado apenas verticalmente:

html<textarea></textarea>

csstextarea {
  resize: vertical;
  width: 200px;
  height: 200px;
}

Результат:

Exemplo . Valor none

O elemento não é redimensionado de forma alguma:

html<textarea></textarea>

csstextarea {
  resize: none;
  width: 200px;
  height: 200px;
}

Результат:

Exemplo . Limitação de largura e altura

É possível limitar a largura e altura mínima e máxima usando as propriedades max-width, min-width, max-height, min-height:

html<textarea></textarea>

csstextarea {
  resize: both;
  min-height: 100px;
  max-height: 300px;
  min-width: 100px;
  max-width: 300px;
}

Результат: