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
/* 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:
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
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # resize |