resize

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

css

/* 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

resize = 
  none        |
  both        |
  horizontal  |
  vertical    |
  block       |
  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:

css

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

HTML

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

css

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

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

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

HTML

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

Specification
CSS Basic User Interface Module Level 4 # resize

Compatibilidad con navegadores

BCD tables only load in the browser

Ver también

<textarea>