Propiedad CSS resize

La propiedad CSS resize controla si el usuario puede redimensionar un elemento arrastrándolo — y en qué dirección. Cuando el redimensionamiento está habilitado, el navegador muestra un pequeño controlador de arrastre (generalmente un indicador triangular) en la esquina inferior derecha del elemento, permitiendo a los visitantes expandir o reducir el cuadro por sí mismos.

Esta propiedad es una de las propiedades CSS3. Su aparición más habitual es en el elemento <textarea>, que es redimensionable de forma predeterminada en la mayoría de los navegadores. Con resize, puedes extender el mismo comportamiento a otros cuadros — o desactivarlo en un <textarea> donde el redimensionamiento libre rompería tu diseño.

Los cuatro valores estándar son none, both, horizontal y vertical. Dos valores adicionales, block e inline, redimensionan en relación con la dirección de escritura y todavía se consideran experimentales.

Información

resize solo tiene efecto cuando el elemento puede recortar su propio contenido. Se ignora en elementos en línea y en cualquier elemento cuyo overflow sea visible (el valor predeterminado). Para que resize funcione en un bloque genérico como un <div>, establece overflow en auto, scroll u hidden. Un <textarea> funciona sin esto porque ya establece su propio contenedor de desplazamiento.

Valor inicial	none
Se aplica a	Elementos con overflow distinto de visible, y opcionalmente elementos reemplazados que representen imágenes o vídeos, e iframes.
Heredado	No.
Animable	No.
Versión	CSS3
Sintaxis DOM	Object.style.resize = "horizontal";

Sintaxis

resize: none | both | horizontal | vertical | block | inline | initial | inherit;

Combina resize con overflow y un width/height inicial razonable para que el cuadro tenga un tamaño definido desde el cual redimensionarse. También puede ser conveniente usar min-width/max-width (o sus equivalentes de altura) para mantener el cuadro dentro de límites razonables.

Ejemplo de la propiedad resize con el valor "both"

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border: 1px solid #1c87c9;
        background-color: #eee;
        padding: 10px;
        width: 300px;
        resize: both;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <h2>Resize property example</h2>
    <div>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </p>
      <p>
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </p>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Aquí tanto la altura como el ancho del <div> son arrastrables, porque resize: both se combina con overflow: auto. Elimina la línea overflow y el controlador de arrastre desaparece — esa es la razón más común por la que resize "no funciona".

Veamos otro ejemplo donde el elemento solo es redimensionable verticalmente:

Ejemplo de la propiedad resize con el valor "vertical"

Ejemplo de CSS resize redimensionable verticalmente

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border: 2px solid #ccc;
        background-color: #eee;
        padding: 10px;
        width: 300px;
        resize: vertical;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <h2>Resize property example</h2>
    <div>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </p>
      <p>
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </p>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Otro ejemplo donde el elemento solo es redimensionable horizontalmente:

Ejemplo de la propiedad resize con el valor "horizontal"

Ejemplo de CSS resize redimensionable horizontalmente

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border: 1px solid #8ebf42;
        background-color: #eee;
        padding: 10px;
        width: 300px;
        height: 200px;
        resize: horizontal;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <h2>Resize property example</h2>
    <div>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </p>
      <p>
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </p>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Desactivar el redimensionamiento en un textarea

Un uso muy común en la práctica es el opuesto a los ejemplos anteriores: deshabilitar el controlador de arrastre predeterminado en un <textarea> para que los usuarios no puedan romper un formulario de ancho fijo. Establece resize: none (y a menudo resize: vertical si quieres permitir solo el crecimiento en altura):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      textarea {
        width: 300px;
        height: 100px;
        /* allow the box to grow taller, but never wider */
        resize: vertical;
      }
    </style>
  </head>
  <body>
    <h2>Comment</h2>
    <textarea placeholder="Type your message..."></textarea>
  </body>
</html>

Cuándo usarlo

Textareas: el caso más habitual. Usa resize: vertical para permitir que los usuarios alarguen un cuadro de comentarios sin distorsionar el ancho del formulario, o resize: none para bloquearlo por completo.
Paneles y vistas previas redimensionables: los editores de código, las comparaciones de imágenes y las ventanas de chat permiten a los usuarios arrastrar un cuadro hasta el tamaño que prefieran.
Evítalo en cuadros críticos para el diseño: si arrastrar un elemento puede superponerse o desplazar otro contenido de forma impredecible, deja resize en none.

Dado que el redimensionamiento solo cambia el tamaño renderizado en el navegador y nunca el contenido real, no tiene efecto sobre el documento que se envía o almacena.

Valores

Valor	Descripción	Pruébalo
none	El elemento no se redimensiona. Este es el valor predeterminado de esta propiedad.	Pruébalo »
both	El elemento se redimensiona tanto verticalmente como horizontalmente.	Pruébalo »
horizontal	El elemento se redimensiona solo horizontalmente.	Pruébalo »
vertical	El elemento se redimensiona solo verticalmente.	Pruébalo »
block	El elemento muestra un mecanismo para permitir al usuario redimensionarlo en la dirección de bloque (ya sea horizontal o verticalmente según el valor de writing-mode y direction). Este valor es una tecnología experimental.
inline	El elemento muestra un mecanismo para permitir al usuario redimensionarlo en la dirección en línea (ya sea horizontal o verticalmente según el valor de writing-mode y direction). Este valor es una tecnología experimental.
initial	Hace que la propiedad use su valor predeterminado.	Pruébalo »
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Qué propiedad CSS se usa para controlar el comportamiento de redimensionamiento de un elemento?

resizescaletransformchange