Định cỡ trường CSS

Một dòng mã để tự động định cỡ các phần tử có nội dung có thể chỉnh sửa.

Adam Argyle

Nếu không có field-sizing, để tạo một trường nhập dữ liệu có kích thước phù hợp, bạn phải đoán kích thước trung bình của dữ liệu đầu vào trong trường văn bản hoặc sử dụng JavaScript để đếm ký tự và tăng chiều cao hoặc chiều rộng của phần tử khi người dùng nhập văn bản. Nói cách khác, việc này không hề dễ dàng và dễ xảy ra lỗi khi cố gắng theo dõi nội dung mà người dùng đã nhập vào một dữ liệu đầu vào.

Với field-sizing, bạn cần một dòng CSS để bật tính năng định cỡ dựa trên nội dung. Kiểu định cỡ dựa trên nội dung này cũng áp dụng cho nhiều phần tử khác ngoài textarea!

textarea, select, input {
  field-sizing: content;
}

Đường liên kết nhanh

Quy cách | Người giải thích

Bạn thích video ngắn?

Wes Bos và Jhey đều có một video hay trên Twitter giới thiệu về field-sizing.

Những phần tử nào chịu ảnh hưởng của thuộc tính field-sizing?

Sau đây là danh sách các phần tử <form> mà field-sizing hoạt động, cùng với thông tin tóm tắt về các hiệu ứng của thuộc tính này đối với từng phần tử.

<textarea>

Thông tin đầu vào sẽ thu gọn thành min-inline-size hoặc cho vừa với phần giữ chỗ.

Khi người dùng nhập, dữ liệu đầu vào sẽ tăng theo hướng cùng dòng cho đến khi đạt đến kích thước cùng dòng tối đa, tại thời điểm đó, văn bản sẽ xuống dòng và kích thước khối của dữ liệu đầu vào sẽ tăng lên để vừa với dòng mới.

<select> và <select multiple>

Phần tử chọn sẽ thu nhỏ để vừa với lựa chọn đã chọn.

Một lựa chọn có thuộc tính multiple sẽ tăng lên để phù hợp với lựa chọn rộng nhất và cao nhất có thể để phù hợp với số lượng lựa chọn.

<input type="text">, <input type="email"> và <input type="number">

Thông tin đầu vào sẽ thu gọn thành min-inline-size hoặc cho vừa với phần giữ chỗ.

Khi người dùng nhập, dữ liệu đầu vào sẽ tăng theo hướng cùng dòng cho đến khi đạt đến max-inline-size, tại thời điểm đó, giá trị đầu vào sẽ bị cắt bớt.

<input type="file">

Ô nhập sẽ thu gọn thành nút và văn bản tên tệp được điền sẵn.

Khi tải tệp lên, dữ liệu đầu vào sẽ rộng bằng nút cộng với văn bản tên tệp.

Xem, thử nghiệm và so sánh kết quả

Dưới đây là ví dụ tương tác và tối giản về hành vi trước và sau của từng phần tử biểu mẫu, chịu ảnh hưởng của field-sizing.

Đang xem xét kỹ hơn

Khi sử dụng [placeholder], phần giữ chỗ sẽ trở thành nội dung. Điều này đã được đề cập trước đó nhưng được gọi ra ở đây, vì điều quan trọng là phải biết khi tạo kiểu cho biểu mẫu. Phần giữ chỗ dài hoặc ngắn sẽ thay đổi kích thước nội tại của dữ liệu đầu vào bằng field-sizing: content.

Xử lý kiểu trống và tràn

Khi sử dụng field-sizing, bạn phải thực hiện thêm một số thao tác. Ahmad Shadeed gọi đây là "CSS phòng thủ", trong đó mục tiêu không nhất thiết phải nêu rõ cách một thành phần hoạt động hoặc hiển thị, mà là để bảo vệ thành phần đó khỏi trạng thái hình ảnh không mong muốn. Trước đây, các dữ liệu đầu vào có kích thước cố định khá lớn, nhưng sau khi áp dụng field-sizing: content, các dữ liệu đầu vào có thể trở nên quá nhỏ hoặc quá lớn.

Bạn nên bắt đầu bằng các kiểu sau. Các thuộc tính này giúp các phần tử không bị thu gọn thành một hộp quá nhỏ và cũng không phát triển quá lớn trong trường hợp textarea.

textarea {
  min-block-size: 3.5rlh;
  min-inline-size: 20ch;
  max-inline-size: 50ch;
}

select {
  min-inline-size: 5ch;
  min-block-size: 1.5lh;
}

input {
  min-inline-size: 7ch;
}

CSS này sử dụng các đơn vị tương đối để định cỡ. Đơn vị lh mới là lựa chọn hoàn hảo cho kích thước khối và ch phù hợp với kích thước cùng dòng.

Giá trị mặc định của field-sizing là gì?

Giá trị mặc định của field-sizing là fixed và chỉ chấp nhận hai giá trị là fixed hoặc content.