การจัดรูปแบบการเลือกที่มีแบรนด์

API ขององค์ประกอบ select ที่ปรับแต่งได้มีวิธีจัดรูปแบบองค์ประกอบ <select> ที่ขับเคลื่อนด้วย CSS และเป็นแบบประกาศเพื่อให้เข้ากับระบบการออกแบบของแบรนด์ได้อย่างสมบูรณ์แบบ การเลือกใช้ appearance: base-select จะช่วยให้คุณเข้าถึง Shadow DOM ภายในขององค์ประกอบการเลือกได้ ซึ่งจะช่วยให้คุณจัดสไตล์ปุ่ม รายการเครื่องมือเลือกตัวเลือก ไอคอนลูกศร และเครื่องหมายถูกได้โดยใช้พร็อพเพอร์ตี้ CSS มาตรฐาน

ก่อนหน้านี้ การสร้างตัวเลือกที่มีแบรนด์เต็มรูปแบบจำเป็นต้องสร้างการควบคุมใหม่ตั้งแต่ต้นด้วย JavaScript ซึ่งมักจะทำให้การช่วยเหลือพิเศษ การไปยังส่วนต่างๆ ด้วยแป้นพิมพ์ และการผสานรวมแบบฟอร์มแบบเนทีฟใช้งานไม่ได้ appearance: base-select ช่วยให้คุณได้รูปลักษณ์ที่กำหนดเองขณะที่เบราว์เซอร์จัดการการโฟกัส การแสดงผลเลเยอร์บนสุด และการเชื่อมโยงการช่วยเหลือพิเศษ

วิธีการนำไปใช้งาน

วิธีใช้การจัดรูปแบบการเลือกที่มีแบรนด์

1. เลือกใช้การปรับแต่ง: ใช้ appearance: base-select กับทั้งองค์ประกอบ <select> และองค์ประกอบเทียม ::picker(select) (ซึ่งกำหนดเป้าหมายรายการแบบเลื่อนลงของตัวเลือก)
2. จัดโครงสร้างปุ่มที่กำหนดเอง (ไม่บังคับ): กำหนดองค์ประกอบ <button> ไว้ภายใน <select> โดยตรงเพื่อแทนที่ทริกเกอร์เริ่มต้น ใช้องค์ประกอบ <selectedcontent> ภายในปุ่มนี้เพื่อแสดงข้อความหรือเนื้อหาของตัวเลือกที่เลือกไว้ในปัจจุบัน
3. จัดรูปแบบรายการเครื่องมือเลือก: ใช้องค์ประกอบจำลอง ::picker(select) เพื่อใช้การจัดพิมพ์ สีพื้นหลัง เส้นขอบ และเงากับรายการแบบเลื่อนลง เบราว์เซอร์จะแสดงผลองค์ประกอบนี้ในเลเยอร์บนสุด ทำให้ปัญหาความขัดแย้งของ z-index กลายเป็นอดีตไปเลย
4. ไอคอนภายในของสไตล์
   • ใช้ select::picker-icon เพื่อจัดรูปแบบหรือแทนที่ไอคอนลูกศร
   • ใช้ option::checkmark เพื่อจัดรูปแบบตัวบ่งชี้เครื่องหมายถูกข้างตัวเลือกที่ใช้งานอยู่
5. ตัวเลือกรูปแบบ: ใช้รูปแบบกับองค์ประกอบ <option> สำหรับสถานะการวางเมาส์เหนือ ระยะห่างจากขอบ และเลย์เอาต์

ตัวอย่างรหัส: Branded Courier Select

ตัวอย่างต่อไปนี้แสดงการเลือกที่กำหนดเองซึ่งจัดรูปแบบด้วยแบบอักษรที่มีความกว้างอักษรขนาดเดียวและเส้นขอบแบบขีดเพื่อให้ตรงกับสุนทรียภาพของแบรนด์ "พัสดุ" ที่เฉพาะเจาะจง

/* Enable customization for the select and its picker */
.brand-select,
.brand-select::picker(select) {
  appearance: base-select;
}

/* Style the visible trigger button */
.brand-select {
  font-family: 'Courier New', monospace;
  background-color: #fffaf0;
  color: #8b4513;
  border: 2px dashed #8b4513;
  border-radius: 4px;
  padding: 0.75rem;
  font-size: 1rem;
  cursor: pointer;
}

/* Style the dropdown options list */
.brand-select::picker(select) {
  font-family: 'Courier New', monospace;
  background-color: #fffaf0;
  border: 2px dashed #8b4513;
  border-radius: 4px;
  padding: 0.5rem;
}

/* Customize internal part colors to match text */
.brand-select::picker-icon {
  color: #8b4513;
}

.brand-select option::checkmark {
  color: #8b4513;
}

/* Style individual options and hover effects */
.brand-select option {
  padding: 0.5rem;
  border-radius: 4px;
  color: #8b4513;
  cursor: pointer;
}

.brand-select option:hover {
  background-color: #fdf5e6;
}

<label for="preferences">Select shipping preference</label>
<select class="brand-select" id="preferences" name="preferences">
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="standard">Standard Shipping</option>
  <option value="express" selected>Express Shipping</option>
  <option value="overnight">Overnight Delivery</option>
</select>

การนำไปใช้เชิงกลยุทธ์และแนวทางปฏิบัติแนะนำ

• ควรใช้ appearance: base-select เมื่อระบบการออกแบบของคุณต้องการความสอดคล้องของภาพที่มีความแม่นยำสูงในตัวควบคุมแบบฟอร์มทั้งหมด ซึ่งไม่สามารถทำได้ด้วยการลบล้างการเลือกข้ามเบราว์เซอร์มาตรฐาน
• อย่าใช้ตัวเลือกนี้หากคุณใช้ประสบการณ์การใช้งานเครื่องมือเลือกแบบเนทีฟของระบบปฏิบัติการ (เช่น เครื่องมือเลือกปุ่มลูกกลิ้งมาตรฐานในอุปกรณ์ iOS) การเลือกใช้ base-select จะเป็นการเลือกไม่ใช้ตัวควบคุม UI ของอุปกรณ์เคลื่อนที่แบบเนทีฟเพื่อใช้เมนูเลเยอร์บนสุดที่แสดงผลบนเว็บ
• ควรตรวจสอบว่าคอนทราสต์ของสีเป็นไปตามมาตรฐาน WCAG เครื่องมือเลือกที่ปรับแต่งได้ช่วยให้คุณตั้งค่าสีเฉพาะกิจได้ แต่คุณมีหน้าที่รับผิดชอบในการตรวจสอบว่าข้อความยังคงอ่านออกได้ง่ายเมื่ออยู่บนพื้นหลังที่กำหนดเอง
• ทดสอบลักษณะการทำงานของเลย์เอาต์ การตั้งค่า appearance: base-select จะนำลักษณะการทำงานของเบราว์เซอร์เริ่มต้นในการปรับขนาดการเลือกตามความกว้างของตัวเลือกที่ยาวที่สุดออก คุณอาจต้องตั้งค่าความกว้างคงที่หรือใช้ข้อจำกัด Flex/Grid เพื่อป้องกันไม่ให้เลย์เอาต์เปลี่ยนแปลง
• ตรวจสอบว่า <select> มีแอตทริบิวต์ name และ <label> ที่เชื่อมโยงกัน ซึ่งจะช่วยให้มั่นใจได้ว่าแม้จะมี UI ที่กำหนดเอง คอมโพเนนต์จะยังคงเข้าถึงได้โดยโปรแกรมอ่านหน้าจอและทำงานได้อย่างถูกต้องกับการส่งแบบฟอร์มมาตรฐาน
• ใช้แอตทริบิวต์ value มาตรฐานในตัวเลือกเพื่อให้แน่ใจว่าการส่งแบบฟอร์มทำงานเหมือนเดิมทุกประการ

กลยุทธ์สำรอง

การสนับสนุนเบราว์เซอร์และทางเลือกสำหรับ <select> ที่ปรับแต่งได้

สำหรับเบราว์เซอร์ที่ยังไม่รองรับ appearance: base-select องค์ประกอบ <select> จะลดระดับลงเป็นเมนูแบบเลื่อนลงของระบบปฏิบัติการมาตรฐานอย่างราบรื่น

• ละเว้นเนื้อหาที่ไม่ใช่ข้อความ: เบราว์เซอร์รุ่นเก่าจะตัดแท็ก HTML (เช่น <svg> หรือ <div>) ภายในแท็ก <option> และแสดงผลเฉพาะโหนดข้อความ ตรวจสอบว่าเนื้อหาข้อความของ <option> อ่านได้และมีความหมายในตัวเอง
• การจัดการโครงสร้าง HTML: โปรแกรมแยกวิเคราะห์มาตรฐานอาจละเว้นแท็ก <button> และ <selectedcontent> ภายใน <select> หรือถือว่าแท็กดังกล่าวไม่ถูกต้อง ไม่จำเป็นต้องใช้ Polyfill ของ JavaScript ที่มีขนาดใหญ่สำหรับการเพิ่มประสิทธิภาพแบบต่อเนื่อง หากคุณมองว่าข้อความมาตรฐานเป็นทางเลือกสำรองที่อ่านได้

document.addEventListener("DOMContentLoaded", () => {
  // Check if browser supports base-select value
  if (!CSS.supports("appearance", "base-select")) {
    // Custom select overrides are not supported natively.
  }
});