resize

Resumen

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

Valor inicial	`none`
Applies to	elements with `overflow` other than `visible`, and optionally replaced elements representing images or videos, and iframes
Heredable	no
Valor calculado	como se especifica
Animation type	discrete

Sintaxis

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

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

Valores

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.

Nota: resize no aplica abloques en los cuales la propiedad overflow es configurada como visible.

Sintaxis formal

none | (en-US) both | (en-US) horizontal | (en-US) vertical | (en-US) block | (en-US) inline

Ejemplos

Deshabilitando la capacidad de cambio de tamaño de areas de texto

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

Utilizando resize con elementos arbitrarios

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

Especificaciones

Espacificación	Estado	Comentario
CSS Basic User Interface Module Level 3 La definición de 'resize' en esta especificación.	Recommendation

Compatibilidad de Navegador

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Escritorio
Móvil

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support (on `<textarea>`)	1.0	4.0 (2.0)-moz (en-US)	Sin soporte	Sin soporte	3.0 (522)
On any block-level and replaced element, table cell, and inline block element (unless `overflow` is `visible`)	4.0	5.0 (5.0)	Sin soporte	Sin soporte	4.0

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support (on `<textarea>`)	?	?	?	?	?
On any block-level and replaced element, table cell, and inline block element (unless `overflow` is `visible`)	?	?	?	?	?

Ver también

<textarea>