Thuộc tính resize

Thuộc tính resize cấm hoặc cho phép thay đổi kích thước của textarea hoặc các phần tử khác (với các phần tử khác không hoạt động trong tất cả các trình duyệt).

Cú pháp

cssbộ chọn {
  resize: both | horizontal | vertical | none;
}

Giá trị

Giá trị mặc định: none. Đối với textarea trong một số trình duyệt: both. Trong những trình duyệt không hỗ trợ resize, textarea sẽ hoạt động như thể giá trị none được đặt.

Ví dụ . Giá trị both

Phần tử có thể kéo giãn theo cả hai hướng:

html<textarea></textarea>

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

Результат:

Ví dụ . Giá trị horizontal

Phần tử chỉ có thể kéo giãn theo chiều ngang:

html<textarea></textarea>

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

Результат:

Ví dụ . Giá trị vertical

Phần tử chỉ có thể kéo giãn theo chiều dọc:

html<textarea></textarea>

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

Результат:

Ví dụ . Giá trị none

Phần tử hoàn toàn không thể kéo giãn:

html<textarea></textarea>

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

Результат:

Ví dụ . Giới hạn chiều rộng và chiều cao

Có thể giới hạn chiều rộng và chiều cao tối thiểu và tối đa bằng cách sử dụng các thuộc tính 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;
}

Результат: