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

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

Giá trị

Giá trị	Mô tả
`both`	Có thể kéo giãn phần tử theo chiều rộng và chiều cao.
`horizontal`	Chỉ có thể kéo giãn phần tử theo chiều rộng.
`vertical`	Chỉ có thể kéo giãn phần tử theo chiều cao.
`none`	Không thể thay đổi kích thước phần tử.

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:

<textarea></textarea>

textarea {
	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:

<textarea></textarea>

textarea {
	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:

<textarea></textarea>

textarea {
	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:

<textarea></textarea>

textarea {
	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:

<textarea></textarea>

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