resize

La propiedad resize de CSS permite controlar la capacidad de cambio de tamaño de un elemento.

/* Keyword values */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;

/* Global values */
resize: inherit;
resize: initial;
resize: unset;

none

El elemento no efrece método para que el usuario controle el cambio de tamaño del elemento.

both

El elemento efrece un mecanismo que permite al usuario cambiar el tamaño del elemento el cual puede ser tanto horizontal como verticalmente.

horizontal

El elemento efrece un mecanismo que permite al usuario cambiar el tamaño del elemento sólo horintalmente.

vertical

El elemento efrece un mecanismo que permite al usuario cambiar el tamaño del elemento sólo verticalmente.

none | both | horizontal | vertical | block | inline

CSS

Por defecto, los elementos <textarea> permiten cambiar el tamaño en Gecko 2.0 (Firefox 4). Se puede anular este comportamiento con el CSS mostrado abajo:

textarea.example {
  resize: none; /* disables resizability */
}

HTML

<textarea class="example">Type some text here.</textarea>

Result

Se puede utilizar la propiedad resize para permitir a cualquier elemento ofrecer el mecanismo para cambiar de tamaño. En el ejemplo de abajo, un bloque <div> contiene un parrafo (elemento <p>) que permite cambiar su tamaño:

CSS

.resizable {
  resize: both;
  overflow: scroll;
  border: 1px solid black;
}

div {
  height: 300px;
  width: 300px;
}

p {
  height: 200px;
  width: 200px;
}

HTML

<div class="resizable">
  <p class="resizable">
    This paragraph is resizable, because the CSS resize property is set to 'both' on this
    element.
  </p>
</div>

Result

• <textarea>