Propiedad resize

La propiedad resize permite o prohíbe cambiar el tamaño de textarea u otros elementos (con otros elementos no funciona en todos los navegadores).

Sintaxis

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

Valores

Valor por defecto: none. Para textarea en algunos navegadores: both. En aquellos navegadores que no admiten resize, textarea se comportará como si se hubiera establecido el valor none.

Ejemplo . Valor both

El elemento se redimensiona en ambas direcciones:

html<textarea></textarea>

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

Результат:

Ejemplo . Valor horizontal

El elemento se redimensiona solo horizontalmente:

html<textarea></textarea>

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

Результат:

Ejemplo . Valor vertical

El elemento se redimensiona solo verticalmente:

html<textarea></textarea>

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

Результат:

Ejemplo . Valor none

El elemento no se redimensiona en absoluto:

html<textarea></textarea>

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

Результат:

Ejemplo . Restricción de anchura y altura

Se puede restringir la anchura y altura mínima y máxima utilizando las propiedades 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;
}

Результат: