Ridimensiona - Trucchi CSS

Anonim

La resizeproprietà controlla se e come un elemento può essere ridimensionato dall'utente facendo clic e trascinando l'angolo inferiore destro dell'elemento.

.module ( resize: both; )

Super importante da sapere: resize non fa nulla a meno che la overflowproprietà non sia impostata su qualcosa di diverso da visible, che è il suo valore iniziale per la maggior parte degli elementi.

Vale anche la pena sapere che Firefox ti consentirà di ridimensionare un elemento più piccolo della sua dimensione originale. I browser Webkit non ti permetteranno di ridimensionare un elemento per renderlo più piccolo, ma solo più grande (in entrambe le dimensioni).

Valori

  • none: l'elemento non è ridimensionabile. Questo è il valore iniziale per la maggior parte degli elementi. L' textareaelemento è l'eccezione più comune: in molti browser il suo resizevalore predefinito è both.
  • both: l'utente può ridimensionare l'altezza e / o la larghezza dell'elemento.
  • horizontal: l'utente può ridimensionare l'elemento orizzontalmente (aumentando la larghezza).
  • vertical: l'utente può ridimensionare l'elemento verticalmente (aumentando l'altezza).
  • inherit: l'elemento eredita il valore di ridimensionamento del suo genitore.

Quando un elemento è ridimensionabile, ha una piccola maniglia dell'interfaccia utente in un angolo inferiore. La maniglia appare a destra sugli elementi della pagina quando la pagina directionè impostata su ltr(da sinistra a destra) ea sinistra nelle rtlpagine (da destra a sinistra).

Un elemento senza maniglia (anteriore) e con maniglia (posteriore)

Demo

L'elemento ridimensionabile in questa demo è un paragrafo. Fare clic sui pulsanti per provare i diversi resizevalori.

Guarda la demo di ridimensionamento della penna di CSS-Tricks (@ css-tricks) su CodePen.

Relazionato

  • overflow
  • direction

Maggiori informazioni

  • La spec
  • Mozilla Docs
  • L'articolo di David Walsh
  • Textarea Tricks

Supporto browser

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.

Desktop

Cromo Firefox IE Bordo Safari
4 4 * No 79 4

Mobile / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 No