optgroup กับ CSS Styling

ข้อจำกัดรุนแรงด้าน CSS Styling ของ <optgroup> มาจากธรรมชาติขององค์ประกอบที่ถูกควบคุมโดย OS Native Widget (ระบบปฏิบัติการเป็นผู้เรนเดอร์เมนูลอยขึ้นมา ไม่ใช่เบราว์เซอร์เรนเดอร์ลงใน DOM Tree ปกติ) ทำให้ CSS Engine ส่วนใหญ่เข้าไม่ถึงหรือไม่ยอมรับสไตล์ที่ระบุ

รายละเอียดข้อจำกัดแต่ละด้าน

1. Box Model ไม่ทำงาน (Padding, Margin, Border)

• ไม่สามารถกำหนด padding เพื่อเพิ่มพื้นที่หายใจรอบข้อความหัวข้อได้
• ไม่สามารถใส่ margin เพื่อแยกหมวดหมู่ออกจากกลุ่มอื่นให้ชัดเจน
• ไม่สามารถกำหนด border, border-bottom หรือเส้นคั่นระหว่างกลุ่มตามแบบใน Design System

/* โค้ดด้านล่างนี้ เบราว์เซอร์ส่วนใหญ่จะเพิกเฉย (Ignored) */
optgroup {
  padding: 8px 12px;
  margin-top: 10px;
  border-bottom: 1px solid #e2e8f0;
}

2. การจัดตำแหน่งและขนาด (Layout & Sizing)

• ไม่สามารถเปลี่ยน display เป็น flex หรือ grid ได้
• ไม่สามารถกำหนด height, min-height หรือ line-height ให้หัวข้อหมวดหมู่
• ไม่สามารถจัดชิดซ้าย/ขวา/กึ่งกลาง (text-align) ได้อย่างอิสระบนหลายเบราว์เซอร์

3. Pseudo-elements และลูกเล่นตกแต่ง (::before, ::after)

• ไม่สามารถแทรกไอคอนหมวดหมู่, badge สถานะ, หรือสัญลักษณ์ bullet ผ่าน ::before หรือ ::after ได้เลย
• ไม่รองรับการใส่ไอคอน SVG หรือภาพประกอบด้านหน้าชื่อกลุ่ม

4. สีและพื้นหลังไม่คงที่ตามเบราว์เซอร์ (Inconsistent Background & Color)

• บางเบราว์เซอร์ยอมให้เปลี่ยน color และ background-color ของ <optgroup> ได้ แต่การแสดงผลลามไปถึงตัวลูก (<option>) มักเพี้ยนหรือไม่สม่ำเสมอ
• บน Safari (macOS/iOS) การใส่ background-color แทบไม่มีผล หรือถูกทับด้วยธีมระบบของ Apple (Aqua / System Dark Mode)

5. ไม่รองรับ CSS Animations และ Transitions

• ไม่สามารถใส่ transition เมื่อเอาเมาส์ไปชี้
• ไม่รองรับลูกเล่นเฟดเข้าหรือเลื่อนแสดงผลแบบ micro-interaction

ความแตกต่างตามแพลตฟอร์มและเบราว์เซอร์

สรุปผลกระทบต่องานดีไซน์

หากต้องการทำ Dropdown ที่มี

• ไอคอนประจำหมวด
• ตัวนับจำนวนรายการข้างชื่อกลุ่ม (เช่น Backend (4))
• ธีม Dark/Light Mode ที่กำหนดสีตรงตาม Brand Guideline เป๊ะ ๆ 100%

การพึ่งพา <optgroup> ผ่าน CSS เพียว ๆ จะไม่สามารถตอบโจทย์ได้ ต้องขยับไปใช้ Custom Dropdown ผ่าน HTML + WAI-ARIA หรือรอการซัพพอร์ตของมาตรฐานใหม่อย่าง Customizable <select> (ชื่อเดิม Open UI <selectlist>) ในอนาคต