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 |
Media | visual |
Valor calculado | como se especifica |
Animation type | discrete |
Canonical order | el orden único no-ambigüo definido por la gramática formal |
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.
Sintaxis formal
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!
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support (on <textarea> ) |
1.0 | 4.0 (2.0)-moz | 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 ) |
? | ? | ? | ? | ? |