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

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

Valores

Valor	Descripción
`both`	Permite redimensionar el elemento en anchura y altura.
`horizontal`	Permite redimensionar el elemento solo en anchura.
`vertical`	Permite redimensionar el elemento solo en altura.
`none`	No se puede cambiar el tamaño del elemento.

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:

<textarea></textarea>

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

Ejemplo . Valor horizontal

El elemento se redimensiona solo horizontalmente:

<textarea></textarea>

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

Ejemplo . Valor vertical

El elemento se redimensiona solo verticalmente:

<textarea></textarea>

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

Ejemplo . Valor none

El elemento no se redimensiona en absoluto:

<textarea></textarea>

textarea {
	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:

<textarea></textarea>

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