การปรับขนาดช่องของ CSS

โค้ด 1 บรรทัดสำหรับองค์ประกอบการปรับขนาดอัตโนมัติที่มีเนื้อหาที่แก้ไขได้

Adam Argyle

หากไม่มี field-sizing คุณจะต้องคาดเดาขนาดเฉลี่ยของอินพุตช่องข้อความหรือใช้ JavaScript เพื่อนับอักขระและเพิ่มความสูงหรือความกว้างขององค์ประกอบเมื่อผู้ใช้ป้อนข้อความเพื่อสร้างช่องป้อนข้อมูลที่มีขนาดเหมาะสม กล่าวอีกนัยหนึ่งคือ การทำเช่นนี้ไม่ใช่เรื่องง่ายและอาจเกิดข้อผิดพลาดได้เมื่อพยายามติดตามเนื้อหาที่ผู้ใช้ป้อนลงในอินพุต

เมื่อใช้ field-sizing คุณจะต้องใช้ CSS เพียงบรรทัดเดียวเพื่อเปิดใช้การปรับขนาดตามเนื้อหา สไตล์การกำหนดขนาดตามเนื้อหานี้ยังใช้กับองค์ประกอบอื่นๆ นอกเหนือจาก textarea ได้ด้วย

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

Browser Support

• 123
• 123
• 152
• 26.2

Source

ลิงก์ด่วน

ข้อกำหนด | คำอธิบาย

ชอบวิดีโอแบบสั้นไหม

Wes Bos และ Jhey มีวิดีโอที่ยอดเยี่ยม บน Twitter ที่จะแนะนำ field-sizing ให้คุณรู้จัก

องค์ประกอบใดบ้างที่ได้รับผลกระทบจากการกำหนดขนาดฟิลด์

ต่อไปนี้คือรายการองค์ประกอบ <form> ที่ field-sizing ทำงานด้วย พร้อมสรุปผลกระทบที่มีต่อแต่ละองค์ประกอบ

<textarea>

อินพุตจะยุบลงเป็น min-inline-size หรือให้พอดีกับตัวยึดตำแหน่ง

ขณะที่ผู้ใช้พิมพ์ ข้อความที่ป้อนจะขยายไปในทิศทางแบบอินไลน์จนกว่าจะถึง ขนาดอินไลน์สูงสุด จากนั้นข้อความจะขึ้นบรรทัดใหม่และขนาดบล็อกของ ข้อความที่ป้อนจะขยายให้พอดีกับบรรทัดใหม่

<select> และ <select multiple>

องค์ประกอบการเลือกจะหดลงเพื่อให้พอดีกับตัวเลือกที่เลือก

องค์ประกอบ Select ที่มีแอตทริบิวต์ multiple จะขยายให้พอดีกับตัวเลือกที่กว้างที่สุดและสูงเท่าที่จำเป็นเพื่อให้พอดีกับจำนวนตัวเลือก

<input type="text">, <input type="email"> และ <input type="number">

อินพุตจะยุบลงเป็น min-inline-size หรือให้พอดีกับตัวยึดตำแหน่ง

ขณะที่ผู้ใช้พิมพ์ ค่าที่ป้อนจะเพิ่มขึ้นในทิศทางแบบอินไลน์จนกว่าจะถึง max-inline-size จากนั้นการล้นจะตัดค่าที่ป้อน

<input type="file">

อินพุตจะยุบลงเหลือปุ่มและข้อความชื่อไฟล์ที่กรอกไว้ล่วงหน้า

เมื่ออัปโหลดไฟล์ อินพุตจะกว้างเท่ากับปุ่มบวกข้อความชื่อไฟล์

ดู ทดสอบ และเปรียบเทียบผลลัพธ์

ต่อไปนี้คือตัวอย่างแบบอินเทอร์แอกทีฟและเรียบง่ายของลักษณะการทำงานก่อนและหลัง องค์ประกอบแต่ละฟอร์มที่ได้รับผลกระทบจาก field-sizing

ลองใช้ใน Codepen

ดูรายละเอียด

เมื่อใช้ [placeholder] ตัวยึดตำแหน่งจะกลายเป็นเนื้อหา เราได้กล่าวถึงเรื่องนี้ไปแล้วก่อนหน้านี้ แต่จะเน้นย้ำอีกครั้งที่นี่ เนื่องจากเป็นสิ่งสำคัญที่ควรทราบเมื่อกำหนดสไตล์แบบฟอร์ม ตัวยึดตำแหน่งแบบยาวหรือสั้น จะเปลี่ยนขนาดโดยธรรมชาติของอินพุตที่มี field-sizing: content

ลองใช้ใน Codepen

การจัดการสไตล์ที่ว่างเปล่าและล้น

การใช้ field-sizing หมายความว่าคุณต้องดำเนินการเพิ่มเติม Ahmad Shadeed เรียกว่า "CSS เชิงรับ" ซึ่งมีเป้าหมายไม่ใช่การระบุอย่างชัดเจนว่าสิ่งใดควรมีลักษณะหรือลักษณะการทำงานอย่างไร แต่เป็นการป้องกันไม่ให้สิ่งนั้นมีลักษณะที่ไม่พึงประสงค์ ก่อนหน้านี้ อินพุตมีขนาดคงที่พอสมควร แต่หลังจากใช้ field-sizing: content แล้ว อินพุตอาจมีขนาดเล็กหรือใหญ่เกินไป

รูปแบบต่อไปนี้เป็นจุดเริ่มต้นที่ดี ซึ่งจะช่วยไม่ให้องค์ประกอบยุบรวมกันเป็นกล่องขนาดเล็กเกินไป และในกรณีของ 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 นี้ใช้หน่วยสัมพัทธ์สำหรับการกำหนดขนาด หน่วย lh ใหม่เหมาะสำหรับขนาดบล็อกและ ch ใช้ได้ดีกับขนาดอินไลน์

ค่าเริ่มต้นของ field-sizing คืออะไร

ค่าเริ่มต้นของ field-sizing คือ fixed และยอมรับเฉพาะค่า 2 ค่าของ fixed หรือ content