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 |
Compatibilidad con navegadores
Loading…