Proprietà di ridimensionamento CSS
Esempio
Qui, l'utente può ridimensionare sia l'altezza che la larghezza di un elemento <div>:
div {
resize: both;
overflow: auto;
}
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
La resize
proprietà definisce se (e come) un elemento è ridimensionabile dall'utente.
Nota: la resize
proprietà non si applica agli elementi inline o agli elementi di blocco in cui overflow="visibile". Quindi, assicurati che l'overflow sia impostato su "scorri", "auto" o "nascosto".
Valore di default: | nessuno |
---|---|
Ereditato: | no |
Animabile: | no. Leggi su animabile |
Versione: | CSS3 |
sintassi JavaScript: | oggetto .style.resize="entrambi" |
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.
I numeri seguiti da -moz- specificano la prima versione che ha funzionato con un prefisso.
Property | |||||
---|---|---|---|---|---|
resize | 4.0 | 79.0 | 5.0 4.0 -moz- |
4.0 | 15.0 |
Sintassi CSS
resize: none|both|horizontal|vertical|initial|inherit;
Valori di proprietà
Value | Description | Play it |
---|---|---|
none | Default value. The user cannot resize the element | |
both | The user can resize both the height and width of the element | |
horizontal | The user can resize the width of the element | |
vertical | The user can resize the height of the element | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Altri esempi
Esempio
Consenti all'utente di ridimensionare solo l'altezza di un elemento <div>:
div
{
resize: vertical;
overflow: auto;
}
Esempio
Consenti all'utente di ridimensionare solo la larghezza di un elemento <div>:
div
{
resize: horizontal;
overflow: auto;
}
Esempio
In molti browser, <textarea> è ridimensionabile per impostazione predefinita. Qui, abbiamo usato la proprietà di ridimensionamento per disabilitare il ridimensionamento:
textarea {
resize: none;
}
Pagine correlate
Tutorial CSS: interfaccia utente CSS
Riferimento HTML DOM: ridimensionare la proprietà