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;
}
: