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

• ตั้งแต่ 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 อยู่แล้ว ก็ไม่จำเป็นต้องแก้ไขเพิ่มเติม

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

มาตรฐานเว็บ

• Open UI Select สเปก
• HTML สเปก Pull Request
• Chrome Intent to Ship

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

• บทความคำขอและคำอธิบายจาก Chrome Blog
• ผลลัพธ์ของฟีดแบ็กจากชุมชน
• การใช้ <hr> ใน <select>
• บทความอธิบายของ Una / ลิงก์สรุปการเปลี่ยนแปลง
• รวม CodePen ของ Una

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

• รวม CodePen ของ Brecht De Ruyte
• การเปรียบเทียบ native vs custom select ของ CSS Tricks
• การพัฒนา <select> ของ Open Props UI
• ตัวอย่าง custom select ที่ใส่แอนิเมชัน

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

• เดโมของ Una
• เดโมของ Brecht
• เดโมของ Adam

[GN⁺]

ความคิดเห็นบน 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]

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

[deminoth]

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

[xguru]

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