0Pricing
HTML Academy · บทเรียน

องค์ประกอบ selectlist

ปรับแต่งตัวควบคุมดรอปดาวน์ด้วยองค์ประกอบ selectlist ที่เสนอ

องค์ประกอบ selectlist เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

ข้อจำกัดที่มีมานาน

องค์ประกอบ <select> เป็นหนึ่งในตัวควบคุมแบบฟอร์มเพียงไม่กี่ชนิดที่ไม่สามารถปรับแต่งรูปลักษณ์ได้ กฎ CSS ทุกข้อที่ใช้กับองค์ประกอบนี้ เช่น เส้นขอบที่กำหนดเอง แบบอักษร และรูปแบบของตัวเลือก จะถูกเบราว์เซอร์เพิกเฉย ทำให้มีไลบรารีเมนูแบบเลื่อนลงที่กำหนดเองเกิดขึ้นนับพันรายการเพื่อทำพฤติกรรมในตัวซ้ำ เพียงเพื่อให้ปรับแต่งตัวเลือกได้

selectlist คืออะไร

<selectlist> ซึ่งอาจพบในชื่อ <selectmenu> ด้วย เป็นองค์ประกอบ HTML ในตัวที่ออกแบบมาเพื่อใช้แทน <select> โดยปรับแต่งรูปแบบได้ โมเดลการใช้งานยังคงเหมือนเดิมในเชิงแนวคิด คือมีปุ่มเรียกใช้และรายการตัวเลือก แต่ทุกส่วนเปิดให้ปรับแต่งด้วย CSS

<selectlist>
  <option>Apple</option>
  <option>Banana</option>
  <option>Cherry</option>
</selectlist>

ส่วนที่ปรับแต่งรูปแบบได้

selectlist เปิดให้ปรับแต่งปุ่ม ซึ่งเป็นปุ่มเรียกใช้ในสถานะปิด รายการตัวเลือก ซึ่งเป็นเมนูเลื่อนลงในสถานะเปิด และตัวเลือกแต่ละรายการ ซูโดอิลิเมนต์ของ CSS (::part(button), ::part(listbox)) ช่วยให้กำหนดรูปแบบของแต่ละส่วนได้โดยไม่กระทบพฤติกรรมในตัว

การปรับแต่งตัวเลือก

ตัวเลือกภายใน selectlist สามารถมีเนื้อหาใด ๆ ก็ได้ เช่น ไอคอน คำอธิบาย หรือรูปแบบการจัดวางที่กำหนดเอง ไม่จำกัดเฉพาะข้อความ เบราว์เซอร์ยังคงจัดการตรรกะการเลือก การนำทางด้วยแป้นพิมพ์ และการจัดการโฟกัสให้ ส่วนคุณสามารถควบคุมรูปลักษณ์ได้อย่างอิสระ

รักษาพฤติกรรมในตัว

selectlist ยังคงรักษาทุกสิ่งที่ <select> ทำได้ดี ได้แก่ การนำทางด้วยแป้นพิมพ์ เช่น ปุ่มลูกศรและการพิมพ์เพื่อค้นหา การประกาศของโปรแกรมอ่านหน้าจอ การทำงานร่วมกับแบบฟอร์ม และการจัดการโฟกัส คุณจะได้พฤติกรรมที่ช่วยการเข้าถึงมาในตัว พร้อมความสามารถในการปรับแต่ง UI ด้านบน

ปุ่มที่กำหนดเอง

จัดเตรียมสล็อตสำหรับปุ่มเรียกใช้: <button slot="button">Choose fruit <svg>...</svg></button> ปุ่มนี้ออกแบบได้ตามต้องการ คุณสามารถแทนที่สามเหลี่ยมในตัวด้วยไอคอนกำหนดเอง เพิ่มป้ายกำกับ หรือเปลี่ยนสีได้ โดยเบราว์เซอร์ยังคงจัดการการเปิดและปิดให้

การทำงานร่วมกับแบบฟอร์ม

selectlist เข้าร่วมการส่งแบบฟอร์มได้เหมือน select โดยมีแอตทริบิวต์ name มีค่า value และถูกส่งไปพร้อมกับแบบฟอร์ม การจัดการฝั่งเซิร์ฟเวอร์เหมือนกันทุกประการ จึงใช้แทนที่ระดับมาร์กอัปได้ทันทีสำหรับกรณีการใช้งาน select ส่วนใหญ่

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

selectlist ยังเป็นความสามารถระยะเริ่มต้น ณ ปี 2026 มีให้ใช้งานในเบราว์เซอร์ที่ใช้ Chromium โดยต้องเปิดแฟล็กหรือใช้ได้ในรูปแบบจำกัด Firefox และ Safari ยังไม่รองรับ การใช้งานจริงจำเป็นต้องมีทางเลือกสำรองเป็น <select> ปกติสำหรับเบราว์เซอร์ที่ไม่รองรับ

ความยากในการทำโพลีฟิลล์

การทำโพลีฟิลล์สำหรับเมนูแบบเลื่อนลงที่กำหนดเองและช่วยการเข้าถึงได้ครบถ้วน โดยมีพฤติกรรมตรงกับของในตัวนั้นทำได้ยาก ทั้งการกักโฟกัส การนำทางด้วยแป้นพิมพ์ การทำงานร่วมกับโปรแกรมอ่านหน้าจอ และการเข้าร่วมแบบฟอร์ม ไลบรารีอย่าง Downshift, Combobox และ react-aria จัดการงานเหล่านี้ด้วยโค้ดหลายพันบรรทัด selectlist จึงเข้ามาแทนที่ทั้งหมดด้วยองค์ประกอบเดียว

เมื่อใดควรนำมาใช้

สำหรับแอปภายในหรือการใช้งานที่จำกัดเฉพาะ Chromium องค์ประกอบรายการเลือกช่วยลดโค้ดได้มากในปัจจุบัน สำหรับเว็บไซต์สาธารณะที่มีกลุ่มผู้ชมกว้าง ควรรอให้ Firefox และ Safari รองรับ หรือใช้ไลบรารีตัวห่อที่ใช้องค์ประกอบรายการเลือกเมื่อรองรับ และใช้ดรอปดาวน์แบบกำหนดเองของ React/Vue ในกรณีอื่น

แผนงานการทดแทน

เมื่อองค์ประกอบรายการเลือกเปิดให้ใช้งานในทุกที่แล้ว คาดว่าไลบรารีดรอปดาวน์แบบกำหนดเองจำนวนมากจะเลิกใช้หรือกลายเป็นเพียงตัวห่อบาง ๆ รอบองค์ประกอบดั้งเดิมของเบราว์เซอร์ โปรดติดตามกระบวนการมาตรฐาน เนื่องจาก API ผ่านการปรับแก้มาแล้วหลายครั้ง และอาจยังพัฒนาต่อก่อนการกำหนดเป็นมาตรฐานขั้นสุดท้าย

ผลกระทบต่อการออกแบบ

นักออกแบบสามารถระบุดรอปดาวน์ที่ตรงตามพิกเซลได้แล้ว โดยไม่ต้องมีข้อแม้ว่า “นี่คือแบบออกแบบ แต่ดรอปดาวน์จะแสดงผลต่างไปในเบราว์เซอร์” องค์ประกอบรายการเลือกช่วยขจัดความไม่สอดคล้องด้านภาพที่มีมานานที่สุดอย่างหนึ่งระหว่างแบบจำลองการออกแบบกับ HTML ที่นำไปใช้งานจริง

ตรวจสอบความรู้

เหตุใดองค์ประกอบรายการเลือกจึงสำคัญ — องค์ประกอบนี้แก้ข้อจำกัดใดของ