Esempio
Specificare che un <div> elemento dovrebbe essere ridimensionabile dall'utente:
div {
resize: both;
overflow: auto;
}
Prova tu stesso " Più "Try it Yourself" esempi di seguito.
Definizione e utilizzo
La proprietà di ridimensionamento specifica se un elemento è ridimensionabile dall'utente.
Note: La proprietà di ridimensionamento si applica agli elementi il cui valore di overflow calcolato è qualcosa di diverso da "visible" .
| Valore di default: | none |
|---|---|
| Inherited: | no |
| animatable: | no. Read about animatable |
| Versione: | CSS3 |
| sintassi JavaScript: | object .style.resize="both" Try it |
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
Numeri seguiti da -moz- specificano la prima versione che ha lavorato con un prefisso.
| Proprietà | |||||
|---|---|---|---|---|---|
| resize | 4.0 | Non supportato | 5.0 4.0 -moz- | 4.0 | 15.0 |
CSS Sintassi
resize: none|both|horizontal|vertical|initial|inherit;I valori delle proprietà
| Valore | Descrizione | Gioca |
|---|---|---|
| none | Valore di default. L'utente non può ridimensionare l'elemento | Gioca " |
| both | L'utente può regolare l'altezza e la larghezza dell'elemento | Gioca " |
| horizontal | L'utente può regolare la larghezza dell'elemento | Gioca " |
| vertical | L'utente può regolare l'altezza dell'elemento | Gioca " |
| initial | Consente di impostare questa proprietà al suo valore di default. Leggi iniziale | Gioca " |
| inherit | Eredita questo immobile dal suo elemento genitore. Leggi su erediterà |
Altri esempi
Esempio
Permettere all'utente di ridimensionare solo l'altezza di un <div> elemento:
div
{
resize: vertical;
overflow:
auto;
}
Prova tu stesso " Esempio
Permettere all'utente di ridimensionare solo la larghezza di un <div> elemento:
div
{
resize: horizontal;
overflow:
auto;
}
Prova tu stesso " Esempio
Per impostazione predefinita, <textarea> elementi sono ridimensionabili. Utilizzare la proprietà di ridimensionamento per evitare textareas essere ridimensionata (disable the "grabber" in the textarea) :
textarea {
resize: none;
}
Prova tu stesso " Pagine correlate
CSS3 tutorial: CSS3 User Interface
Di riferimento HTML DOM: resize property