Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.
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
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:
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) |
? | ? | ? | ? | ? |