resize

Try it

resize: both;

resize: horizontal;

resize: vertical;

resize: none;

<section class="default-example" id="default-example">
  <div id="example-element">Try resizing this element.</div>
</section>

#example-element {
  background: linear-gradient(135deg, cyan 0%, cyan 94%, white 95%);
  border: 3px solid #c5c5c5;
  overflow: auto;
  width: 250px;
  height: 250px;
  font-weight: bold;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

resize không áp dụng cho những phần tử sau:

• Phần tử inline
• Phần tử block có thuộc tính overflow được đặt thành visible hoặc clip

Cú pháp

/* Giá trị từ khóa */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;

/* Giá trị toàn cục */
resize: inherit;
resize: initial;
resize: revert;
resize: revert-layer;
resize: unset;

Thuộc tính resize được chỉ định bằng một giá trị từ khóa từ danh sách dưới đây.

Giá trị

none

Phần tử không cung cấp phương thức nào để người dùng thay đổi kích thước.

both

Phần tử hiển thị cơ chế cho phép người dùng thay đổi kích thước cả theo chiều ngang lẫn chiều dọc.

horizontal

Phần tử hiển thị cơ chế cho phép người dùng thay đổi kích thước theo chiều ngang.

vertical

Phần tử hiển thị cơ chế cho phép người dùng thay đổi kích thước theo chiều dọc.

block

Phần tử hiển thị cơ chế cho phép người dùng thay đổi kích thước theo hướng block (ngang hoặc dọc tùy thuộc vào giá trị writing-mode và direction).

inline

Phần tử hiển thị cơ chế cho phép người dùng thay đổi kích thước theo hướng inline (ngang hoặc dọc tùy thuộc vào giá trị writing-mode và direction).

Định nghĩa hình thức

Cú pháp hình thức

resize = 
  none        |
  both        |
  horizontal  |
  vertical    |
  block       |
  inline      

Ví dụ

Tắt khả năng thay đổi kích thước của text area

Trong nhiều trình duyệt, các phần tử <textarea> có thể thay đổi kích thước theo mặc định. Bạn có thể ghi đè hành vi này bằng thuộc tính resize.

HTML

<textarea>Type some text here.</textarea>

CSS

textarea {
  resize: none; /* Tắt khả năng thay đổi kích thước */
}

Kết quả

Sử dụng resize với các phần tử tùy ý

Bạn có thể dùng thuộc tính resize để làm cho bất kỳ phần tử nào có thể thay đổi kích thước. Trong ví dụ dưới đây, một <div> có thể thay đổi kích thước chứa một đoạn văn bản có thể thay đổi kích thước (phần tử <p>).

HTML

<div class="resizable">
  <p class="resizable">
    This paragraph is resizable in all directions, because the CSS `resize`
    property is set to `both` on this element.
  </p>
</div>

CSS

.resizable {
  resize: both;
  overflow: scroll;
  border: 1px solid black;
}

div {
  height: 300px;
  width: 300px;
}

p {
  height: 200px;
  width: 200px;
}

Kết quả

Đặc tả kỹ thuật

Tương thích trình duyệt

Xem thêm

• <textarea>