หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Adam Argyle

เผยแพร่เมื่อวันที่ 24 มีนาคม 2025

ตั้งแต่ Chrome เวอร์ชัน 135 นักพัฒนาและนักออกแบบเว็บได้ใช้องค์ประกอบ <select> ที่เข้าถึงได้ เป็นไปตามมาตรฐาน และกำหนดสไตล์ด้วย CSS บนเว็บร่วมกันได้ในที่สุด เราได้ทํางานด้านวิศวกรรมและข้อกําหนดร่วมกันเป็นเวลาหลายปี ผลลัพธ์ที่ได้คือคอมโพเนนต์ที่มีประสิทธิภาพและสมบูรณ์แบบอย่างไม่น่าเชื่อ ซึ่งจะไม่ทําให้เบราว์เซอร์รุ่นเก่าใช้งานไม่ได้

ต่อไปนี้เป็นวิดีโอของรายการที่กำหนดเองโดยใช้ฟีเจอร์ใหม่เหล่านี้

มีการแสดงตัวอย่างเพลงโดย Una, Brecht และ Adam

หากติดตามมาอย่างใกล้ชิด คุณจะเห็นว่าชื่อและฟีเจอร์บางอย่างของข้อกำหนดมีการเปลี่ยนแปลงไปนับตั้งแต่คำขอความคิดเห็นจากชุมชนของ Una แต่ไม่ต้องกังวล หากคุณเคยทํางานจากโพสต์ดังกล่าวและสนใจสิ่งที่เปลี่ยนแปลงไป Una ก็พร้อมช่วยเหลือคุณเช่นกัน

นอกจากนี้ เรายังมีเอกสารประกอบใหม่ใน MDN สำหรับ select ที่ปรับแต่งได้ ซึ่งเต็มไปด้วยรายละเอียด

พบกับ `appearance: base-select`

พร็อพเพอร์ตี้ CSS ใหม่ appearance: base-select ที่จะนำองค์ประกอบ <select> ไปยังสถานะใหม่ที่กําหนดค่าและจัดรูปแบบได้ ซึ่งโดยทั่วไปเรียกว่ารูปแบบ "พื้นฐาน"

.custom-select {
  &, &::picker(select) {
    appearance: base-select;    
  }
}

การใช้ base-select จะปลดล็อกฟีเจอร์และลักษณะการทำงานใหม่ๆ ต่อไปนี้

เปลี่ยนโปรแกรมแยกวิเคราะห์ HTML ของเบราว์เซอร์สำหรับเนื้อหาภายใน <select>
เปลี่ยนอินเทอร์เน็ตที่แสดงผลแล้วของ <select>
แสดงชิ้นส่วนและสถานะภายในใหม่ของ <select>
รูปลักษณ์ใหม่ที่ดูเรียบง่ายและเพิ่มประสิทธิภาพเพื่อการปรับเปลี่ยน
ตัวเลือกที่แสดงอยู่ในเลเยอร์บนสุด เช่น ป๊อปอัป
ตัวเลือกที่แสดงจะอยู่ในตำแหน่ง anchor()

การใช้ base-select จะสูญเสียฟีเจอร์และลักษณะการทํางานบางอย่าง ดังนี้

<select> จะไม่แสดงผลนอกแผงเบราว์เซอร์
แต่จะไม่ได้ทริกเกอร์คอมโพเนนต์ของระบบปฏิบัติการบนอุปกรณ์เคลื่อนที่ในตัว
<select> จะหยุดใช้ความกว้างของ <option> ที่ยาวที่สุด

ตอนนี้ `<select>` สามารถใส่เนื้อหา HTML ที่เป็นริชมีเดียได้แล้ว

ก่อนที่คุณจะปรับแต่ง <select> ได้ หากคุณใส่สิ่งต่างๆ เช่น รูปภาพหรือ SVG ไว้ในองค์ประกอบ <option> เบราว์เซอร์จะไม่สนใจสิ่งเหล่านั้น

ลองดู HTML ต่อไปนี้ เบราว์เซอร์จะอ่าน HTML นี้ตามที่คุณเขียน

<select class="custom-select">
  <option>
    <svg aria-hidden>…</svg>
    <span>HTML</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>CSS</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>JavaScript</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>WASM</span>
  </option>
</select>

อย่างไรก็ตาม DOM ที่ใช้จะไม่รวม <svg> ต่อไปนี้

<select class="custom-select">
  <option>
    <span>HTML</span>
  </option>
  <option>
    <span>CSS</span>
  </option>
  <option>
    <span>JavaScript</span>
  </option>
  <option>
    <span>WASM</span>
  </option>
</select>

ต่อไปนี้คือ (จากซ้ายไปขวา) Chrome, Safari และ Firefox ที่แสดงผล HTML ก่อนหน้า หากเบราว์เซอร์รองรับ appearance: base-select SVG จะปรากฏในตัวเลือกดังกล่าว หากไม่รองรับ SVG จะไม่ปรากฏ

Chrome, Safari และ Firefox ที่แสดงการแสดงผลรายการที่มี SVG อยู่ภายใน Chrome จะแสดงรูปภาพ ส่วน Safari และ Firefox จะแสดงผลราวกับว่าไม่มีรูปภาพ — ลองใช้ใน Codepen นี้

การเปลี่ยนแปลงโปรแกรมแยกวิเคราะห์มีความเสี่ยงที่จะทำให้เว็บไซต์ที่มีอยู่ใช้ไม่ได้กับ Select ที่ปรับแต่งได้ Chrome มีฟีเจอร์ที่อยู่เบื้องหลังการทดสอบ Finch ในกรณีที่จำเป็นต้องปิดการทดสอบอย่างเร่งด่วน หากทุกอย่างเรียบร้อยดี การทดสอบจะสิ้นสุดลงและโค้ดจะส่งไปยังแหล่งที่มาอย่างถาวร

ปรับแต่งได้อย่างเต็มที่

คุณเปลี่ยน base-select แต่ละส่วน ปรับแต่ง และใส่ภาพเคลื่อนไหวได้ ต่อไปนี้เป็นตัวอย่างที่ใช้ฟีเจอร์ใหม่ทั้งหมดเพื่อสร้างประสบการณ์การเลือกที่โดดเด่นและมีประโยชน์

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

ดูตัวอย่างอื่นๆ อีกมากมายได้ในส่วนแหล่งข้อมูลท้ายโพสต์นี้

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

การโต้ตอบ JavaScript ที่มีอยู่กับองค์ประกอบ <select> จะไม่เสี่ยง

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

หากใช้แอตทริบิวต์ value ใน <option> ก็ไม่ต้องกังวล

แหล่งข้อมูล

Chrome เป็นเบราว์เซอร์แรกที่ใช้งาน base-select แต่ทุกเบราว์เซอร์มีส่วนร่วมในข้อกำหนด และยังมีองค์ประกอบ "พื้นฐาน" อีกมากมายที่ยังไม่เสร็จสมบูรณ์ นี่เป็นเพียงจุดเริ่มต้นเท่านั้น

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

ขอขอบคุณอย่างยิ่งทุกคนที่มีส่วนร่วมในความสำเร็จครั้งนี้