Ιδιότητα resize

Η ιδιότητα resize απαγορεύει ή επιτρέπει την αλλαγή μεγέθους του textarea ή άλλων στοιχείων (με άλλα στοιχεία δεν λειτουργεί σε όλα τα προγράμματα περιήγησης).

Σύνταξη

cssεπιλογέας {
  resize: both | horizontal | vertical | none;
}

Τιμές

Προεπιλεγμένη τιμή: none. Για το textarea σε ορισμένα προγράμματα περιήγησης: both. Σε εκείνα τα προγράμματα περιήγησης που δεν υποστηρίζουν την resize, το textarea θα συμπεριφέρεται σαν να είχε οριστεί η τιμή none.

Παράδειγμα . Τιμή both

Το στοιχείο αλλάζει μέγεθος και στις δύο κατευθύνσεις:

html<textarea></textarea>

csstextarea {
  resize: both;
  width: 200px;
  height: 200px;
}

Результат:

Παράδειγμα . Τιμή horizontal

Το στοιχείο αλλάζει μέγεθος μόνο οριζόντια:

html<textarea></textarea>

csstextarea {
  resize: horizontal;
  width: 200px;
  height: 200px;
}

Результат:

Παράδειγμα . Τιμή vertical

Το στοιχείο αλλάζει μέγεθος μόνο κάθετα:

html<textarea></textarea>

csstextarea {
  resize: vertical;
  width: 200px;
  height: 200px;
}

Результат:

Παράδειγμα . Τιμή none

Το στοιχείο δεν αλλάζει μέγεθος καθόλου:

html<textarea></textarea>

csstextarea {
  resize: none;
  width: 200px;
  height: 200px;
}

Результат:

Παράδειγμα . Περιορισμός πλάτους και ύψους

Μπορείτε να περιορίσετε το ελάχιστο και το μέγιστο πλάτος και ύψος χρησιμοποιώντας τις ιδιότητες max-width, min-width, max-height, min-height:

html<textarea></textarea>

csstextarea {
  resize: both;
  min-height: 100px;
  max-height: 300px;
  min-width: 100px;
  max-width: 300px;
}

Результат: