۝ OraWeb.it ۝ resize

CSS resize

La proprietà CSS3 resize consente il ridimensionamento degli elementi interattivi

La proprietà resize in CSS3 permette di controllare se un utente può modificare le dimensioni di un elemento, tipicamente una <textarea>. Funziona solo con overflow impostato su un valore diverso da visible.

HOSTING • VPS • DEDICATED SERVER • HOUSING • SSL • PEC • CLOUD • DOMAIN

Sintassi

Significato dei valori principali:

none: Disabilita completamente il ridimensionamento.
both: Permette il ridimensionamento sia in larghezza che in altezza.
horizontal: Permette il ridimensionamento solo orizzontale.
vertical: Permette il ridimensionamento solo verticale.
block / inline: Valori supportati parzialmente nei browser più recenti per elementi con direzioni di scrittura specifiche.

Esempio proprietà: resize

Codice Esempio: resize

CODE: CSS preleva codice

```
.resize-both {
```
```
  resize: both;
```
```
  overflow: auto;
```
```
  width: 300px;
```
```
  height: 100px;
```
```
  padding: 10px;
```
```
  margin-bottom: 10px;
```
```
}
```
```
 
```
```
.resize-horizontal {
```
```
  resize: horizontal;
```
```
  overflow: auto;
```
```
  width: 300px;
```
```
  height: 100px;
```
```
  padding: 10px;
```
```
  margin-bottom: 10px;
```
```
}
```
```
 
```
```
.resize-vertical {
```
```
  resize: vertical;
```
```
  overflow: auto;
```
```
  width: 300px;
```
```
  height: 100px;
```
```
  padding: 10px;
```
```
  margin-bottom: 10px;
```
```
}
```
```
 
```
```
.resize-none {
```
```
  resize: none;
```
```
  overflow: auto;
```
```
  width: 300px;
```
```
  height: 100px;
```
```
  padding: 10px;
```
```
  margin-bottom: 10px;
```
```
}
```

Contenuto Esempio: resize

Esempio di utilizzo della proprietà `resize`

Nel seguente esempio, diverse textarea usano valori differenti della proprietà resize per mostrare i comportamenti possibili:

HTML e CSS completo per l'esempio:


<style>
  .resize-both {
    resize: both;
    overflow: auto;
    width: 300px;
    height: 100px;
    padding: 10px;
    margin-bottom: 10px;
  }

  .resize-horizontal {
    resize: horizontal;
    overflow: auto;
    width: 300px;
    height: 100px;
    padding: 10px;
    margin-bottom: 10px;
  }

  .resize-vertical {
    resize: vertical;
    overflow: auto;
    width: 300px;
    height: 100px;
    padding: 10px;
    margin-bottom: 10px;
  }

  .resize-none {
    resize: none;
    overflow: auto;
    width: 300px;
    height: 100px;
    padding: 10px;
    margin-bottom: 10px;
  }
</style>

<textarea class="resize-both">resize: both;</textarea>
<textarea class="resize-horizontal">resize: horizontal;</textarea>
<textarea class="resize-vertical">resize: vertical;</textarea>
<textarea class="resize-none">resize: none;</textarea>

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

CSS resize

La proprietà CSS3 resize consente il ridimensionamento degli elementi interattivi

Sintassi

Significato dei valori principali:

Esempio proprietà: resize

Esempio di utilizzo della proprietà `resize`

HTML e CSS completo per l'esempio:

Supporto Browser

Follow us

Quick Links

Information

Contact Information

CSS resize

La proprietà CSS3 resize consente il ridimensionamento degli elementi interattivi

Sintassi

Significato dei valori principali:

Esempio proprietà: resize

Esempio di utilizzo della proprietà resize

HTML e CSS completo per l'esempio:

Supporto Browser

Follow us

Quick Links

Information

Contact Information

Esempio di utilizzo della proprietà `resize`