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

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

Adam Argyle

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

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

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

การรองรับเบราว์เซอร์

• 123
• 123
• x
• x

แหล่งที่มา

ลิงก์ด่วน

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

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

Wes Bos และ Jhey มีวิดีโอที่ยอดเยี่ยมเกี่ยวกับ field-sizing บน Twitter

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

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

<textarea>

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

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

<select> และ <select multiple>

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

รายการแบบเลือกที่มีแอตทริบิวต์ 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 คือ fixed และยอมรับเฉพาะค่า 2 ค่า ได้แก่ fixed หรือ content