თვისება resize

თვისება resize აუკრძალავს ან დაუშვებს textarea-ის ან სხვა ელემენტების ზომის შეცვლას (სხვა ელემენტებთან მუშაობს ყველა ბრაუზერში არა).

სინტაქსი

cssსელექტორი {
  resize: both | horizontal | vertical | none;
}

მნიშვნელობები

მნიშვნელობა აღწერა
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;
}

Результат: