Định cỡ trường CSS

Một dòng mã để tự động điều chỉnh kích thướ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 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 trường văn bản hoặc sử dụng JavaScript để đếm số 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 đầu vào.

Với field-sizing, bạn chỉ 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 hoạt động cho nhiều textarea!

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

Browser Support

• 123
• 123
• x
• 26.2

Source

Đường liên kết nhanh

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

Bạn có thích video ngắn không?

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

Những phần tử nào chịu ảnh hưởng của việc điều chỉnh kích thước trường?

Sau đây là danh sách các phần tử <form> mà field-sizing hoạt động, kèm theo bản tóm tắt về tác động của phần tử này đối với từng phần tử.

<textarea>

Đầu vào sẽ thu gọn xuống thành min-inline-size hoặc vừa với phần giữ chỗ.

Khi người dùng nhập, đầu vào sẽ tăng theo hướng nội tuyến cho đến khi đạt đến kích thước nội tuyến 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 đầ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ẽ mở rộng để phù hợp với lựa chọn rộng nhất và có chiều cao vừa đủ để phù hợp với số lượng lựa chọn.

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

Đầu vào sẽ thu gọn xuống thành min-inline-size hoặc vừa với phần giữ chỗ.

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

<input type="file">

Đầu vào sẽ thu gọn xuống nút và văn bản tên tệp được điền sẵn.

Sau khi bạn tải một tệp lên, đầu vào sẽ có chiều rộng bằng chiều rộng của nút cộng với văn bản tên tệp.

Xem, kiểm tra và so sánh kết quả

Sau đây là một ví dụ tối giản và có tính tương tác 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.

Dùng thử trên Codepen

Xem xét kỹ hơn

Khi bạn 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 nêu rõ ở đây, vì bạn cần biết khi tạo kiểu cho biểu mẫu. Trình giữ chỗ dài hoặc ngắn sẽ thay đổi kích thước nội tại của các đầu vào bằng field-sizing: content.

Dùng thử trên Codepen

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

Việc sử dụng field-sizing có nghĩa là bạn phải thực hiện thêm một số thao tác. Ahmad Shadeed gọi đó là "CSS phòng thủ", trong đó mục tiêu không nhất thiết là phải nêu rõ chính xác 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 thành phần đầu vào có khá nhiều kích thước cố định, nhưng sau khi áp dụng field-sizing: content, các thành phần đầu vào có thể trở nên quá nhỏ hoặc quá lớn.

Các kiểu sau đây là một điểm khởi đầu tốt. Các thuộc tính này giúp các phần tử không bị thu hẹp thành một hộp quá nhỏ và trong trường hợp textarea, không tăng kích thước quá lớn.

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 rất phù hợp với kích thước khối và ch hoạt động hiệu quả với kích thước cùng dòng.

Giá trị mặc định của tính năng điều chỉnh kích thước trường là gì?

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