ตอนนี้ปรับแต่ง `<select>` ด้วย CSS ได้แล้ว

 (developer.chrome.com)
8 คะแนน โดย xguru 2025-03-28 | 4 ความคิดเห็น | แชร์ทาง WhatsApp
  • ตั้งแต่ Chrome 135 เป็นต้นไป เริ่มรองรับความสามารถใหม่ที่ทำให้ปรับแต่งองค์ประกอบ <select> ด้วย CSS ได้ โดยยังคงมาตรฐานการเข้าถึงไว้
  • หลังจากใช้เวลาหลายปีในการปรับสเปกและพัฒนา ฟีเจอร์นี้ถูกส่งมอบเป็นคอมโพเนนต์ที่แข็งแรงและไม่พังในเบราว์เซอร์รุ่นเก่า
  • สามารถใส่เนื้อหา HTML ได้ และเมื่อเพิ่ม appearance: base-select ก็จะเปิดให้ปรับแต่งได้หลากหลาย เช่น แอนิเมชันและสไตล์ต่างๆ

แนะนำ appearance: base-select

  • พร็อพเพอร์ตี CSS ใหม่ appearance: base-select จะเปลี่ยนองค์ประกอบ <select> ให้เข้าสู่สถานะใหม่ที่ปรับแต่งได้ 
    .custom-select {  
  &, &::picker(select) {  
    appearance: base-select;    
  }  
}

  • ความสามารถใหม่ที่เกิดขึ้นเมื่อใช้ base-select

    • การทำงานของตัวแยกวิเคราะห์ HTML ของเบราว์เซอร์กับเนื้อหาภายใน <select> เปลี่ยนไป
    • วิธีการเรนเดอร์และโครงสร้างภายในเปลี่ยนไป
    • มี internal part และ state ใหม่ให้ใช้งาน
    • มีดีไซน์ตั้งต้นให้น้อยที่สุด (เพื่อให้เหมาะกับการคัสตอม)
    • ตัวเลือกที่แสดงจะปรากฏใน top layer แบบเดียวกับ popover
    • ตำแหน่งของตัวเลือกควบคุมได้ด้วย anchor()

  • ความสามารถที่หายไปเมื่อใช้ base-select

    • ไม่สามารถเรนเดอร์ <select> ออกนอกหน้าต่างเบราว์เซอร์ได้
    • จะไม่เรียก UI เลือกค่าพื้นฐานของระบบปฏิบัติการมือถือ
    • จะไม่สะท้อนความกว้างของ <option> ที่ยาวที่สุด

สามารถใส่เนื้อหา HTML ใน <select> ได้

  • ก่อนหน้านี้ หากใส่รูปภาพหรือ SVG ใน <option> เบราว์เซอร์จะมองข้าม
  • เมื่อใช้ appearance: base-select จะเรนเดอร์ HTML ตามนั้นเลย
  • ใน Chrome จะมองเห็นตัวเลือกที่มี SVG แต่ Safari, Firefox และตัวอื่นๆ ยังไม่รองรับ
  • เดโม CodePen: ลิงก์ทดลอง
  • ฟีเจอร์นี้ถูกนำมาใช้ผ่านการทดลอง Finch จึงอาจถูกยกเลิกได้หากจำเป็น

ปรับแต่งได้เต็มรูปแบบ

  • ทุกองค์ประกอบของ base-select สามารถแทนที่ ใส่แอนิเมชัน และจัดสไตล์ได้
  • สามารถออกแบบ UI สำหรับการเลือกที่มีความหมายได้หลากหลาย
  • ตัวอย่างเช่น การแสดงสถานะ ตัวเลือกที่มีอวาตาร์ ตัวเลือกสี หรือการเลือกสถานะโพสต์
  • เดโม CodePen: ลิงก์ทดลอง

อินเทอร์เฟซ JavaScript ไม่เปลี่ยนแปลง

  • พฤติกรรม JavaScript ของ <select> แบบเดิมยังคงเหมือนเดิม
  • แต่หากใส่ HTML ลงใน <option> วิธี parse ค่าที่เลือกจะเปลี่ยนไป จึงควรทดสอบ
  • หากใช้พร็อพเพอร์ตี value อยู่แล้ว ก็ไม่จำเป็นต้องแก้ไขเพิ่มเติม

ข้อมูลเพิ่มเติม

มาตรฐานเว็บ

เอกสารเกี่ยวกับ Chrome

แหล่งข้อมูลจากชุมชน

เดโมที่ใช้ <select> แบบปรับแต่งแล้ว

บทความที่เกี่ยวข้อง

4 ความคิดเห็น

 
GN⁺ 2025-03-28
ความคิดเห็นบน Hacker News

  • ที่ฉันตื่นเต้นกับฟีเจอร์นี้เกินสัดส่วน น่าจะเผยให้เห็นตัวตนของฉันในฐานะนักพัฒนาเว็บช่วงต้นยุค 2000 ฟีเจอร์นี้มีประโยชน์มาก เพราะองค์ประกอบ select ให้ความสามารถที่ไม่อาจจำลองด้วย HTML ได้

    • ตอนนี้ควรเพิ่ม autocomplete และตัวเลือกแท็กเป็นลำดับถัดไป

  • จนกว่าฟีเจอร์นี้จะรองรับอย่างแพร่หลาย ควรใช้แบบ progressive enhancement ตอนนี้ตาม caniuse.com รองรับทั่วโลกอยู่ที่ 46%

    • ต้องระวังไม่ให้ผู้ใช้เบราว์เซอร์ที่ยังไม่รองรับได้รับประสบการณ์ที่แย่
    • สำคัญมากที่จะไม่ใส่ข้อมูลหรือความสามารถที่สำคัญไว้ในสไตล์แบบใหม่

  • ดีใจมากที่ได้เห็นฟีเจอร์นี้ถูกนำมาใช้งาน มันจะเป็นการพัฒนาที่ดีกว่าตัวแทน select box แบบคัสตอมอย่างมาก

  • กังวลว่ามันจะไม่ไปกระตุ้นคอมโพเนนต์ของระบบปฏิบัติการมือถือที่มีมาให้ในตัว คอมโพเนนต์ที่มีมาในตัวนั้นเชื่อถือได้ เข้าถึงได้ และตอบสนองได้ดี

    • เวลาที่ UI ของ Android เปิดขึ้นมาก็รู้สึกอุ่นใจดี เรื่องนี้ใช้ได้ไม่ใช่แค่กับ select แต่รวมถึง input วันที่/เวลาด้วย

  • คอนโทรลบางอย่างไม่ใส่สไตล์เพิ่มจะดีกว่า สำหรับ scrollbar นั้น บางครั้งบางเกินไปหรือคอนทราสต์สีแย่จนใช้งานลำบาก

    • องค์ประกอบ select แบบปกติอาจไม่ใช่คอนโทรลที่สวยที่สุด แต่ก็ทำหน้าที่ของมันได้

  • ดูเหมือนนี่คือสิ่งที่นักพัฒนาเว็บรอกันมาหลายทศวรรษ มีโอกาสแทนที่ไลบรารี JS ได้จำนวนมาก

    • ฉันไม่ได้ติดตั้ง Chrome เลยสงสัยว่ามันจัดการกับฟิลด์เลือกหลายค่าในวิดีโอตัวอย่างอย่างไร

  • ตอนนี้สามารถคัสตอมองค์ประกอบ select ด้วย CSS ได้แล้วในเบราว์เซอร์ Chromium

    • มาตรฐานเว็บกำลังซับซ้อนขึ้นเรื่อย ๆ

  • มีการให้ลิงก์ไปยัง issue ของ Firefox

  • ถ้ายังเดินหน้าแบบนี้ต่อไป อีกไม่นานก็คงมีความสามารถเทียบเท่า VB6 ได้

  • ดีกว่าไลบรารี JS ที่พัง ๆ แต่สิ่งที่กังวลหลักคือเวลามีตัวเลือกจำนวนมากแล้วเลย์เอาต์จะเป็นอย่างไร

    • น่ากลัวที่มันจะไม่ไปกระตุ้นคอมโพเนนต์ของระบบปฏิบัติการมือถือที่มีมาให้ในตัว เลย์เอาต์จะออกมาเป็นอย่างไรนะ
    • ตัวเลือกที่แสดงถูกจัดตำแหน่งด้วย anchor()
    • ยังเป็นฟีเจอร์ทดลอง แต่บางทีนี่อาจเป็นส่วนที่ดีที่สุดก็ได้ ถ้ามันใช้งานได้จริงใน CSS ก็จะน่าทึ่งมาก
 
carnoxen 2025-03-28

งั้น <selectlist> ก็จะไม่จำเป็นอีกต่อไปแล้วเหรอ?
 
deminoth 2025-03-28

พูดอีกเรื่องหนึ่งคือ ใน Slackbot ดูเหมือนว่า <select> ในชื่อเรื่องจะไม่แสดงนะ 555
 
xguru 2025-03-28

อ๊ะ ฮือ เดี๋ยวฉันจะแก้ไขอันนี้ภายหลังนะครับ/ค่ะ