‏حالا می‌شه select رو کامل با CSS استایل داد

نویسنده تو این پست می‌گه سال‌ها استایل دادن به یه دردسر بزرگ بوده و خیلی‌ها برای یه ظاهر دلخواه سراغ div و span و جاوااسکریپت و ARIA می‌رفتن. حالا Safari 27 قابلیت Customisable Select رو اضافه کرده و این کار رو بعد از Chrome انجام داده. یعنی می‌شه خود المان بومی select رو، با همه دسترس‌پذیری‌ای که از قبل داره، کامل استایل داد.

چند سال پیش یه پیشنهاد برای المان جدیدی به اسم بود. مشکلش این بود که باید همه selectهای موجود رو عوض می‌کردی و برای مرورگرهای قدیمی هم یه فکری می‌کردی. راه‌حلی که آخرش انتخاب شد روی همون ساخته شده، پس اگه از قبل select داری فقط باید CSSش رو بازنویسی کنی. ولی اگه یه کامپوننت دست‌ساز داری، باید اونو با یه select واقعی عوض کنی.

قدم اول اینه که هم دکمه و هم منوی بازشونده (که بهش picker می‌گن) رو به استایل پایه جدید ببری:

select,
::picker(select) {
  appearance: base-select
}

این کار یه نقطه شروع خنثی می‌ده: فونت رو از والد به ارث می‌بره، حاشیه‌ها ساده‌ن، یه فلش رو به پایین روی دکمه هست و picker زیر دکمه قرار می‌گیره. بعدش با ::picker-icon می‌شه آیکون فلش رو عوض کرد و با شبه‌کلاس :open حالت باز بودن منو رو هدف گرفت. خود منو با ::picker(select) استایل می‌گیره، گزینه‌ها با option و تیک کنار گزینه انتخاب‌شده با ::checkmark. برای پررنگ کردن گزینه انتخاب‌شده هم :checked هست. حتی می‌شه تو گزینه‌ها عکس و markup گذاشت و با همون محتوای غنی رو تو دکمه هم نشون داد.

این قابلیت‌ها فعلاً تو Firefox پشتیبانی نمی‌شن، ولی تو Chrome و مرورگرهای مبتنی بر Chromium مثل Edge و Opera و همین‌طور Safari 27 کار می‌کنن. به گفته نویسنده این الان حدود ۷۲ درصد استفاده جهانی از مرورگرها رو پوشش می‌ده و چون اپل iOS 27 رو آروم‌تر از همیشه منتشر می‌کنه، این عدد هنوز جای رشد داره. نکته مهم اینه که لازم نیست منتظر بمونی: مرورگرهای قدیمی همون select معمولی رو نشون می‌دن که شاید زیبا نباشه ولی کاملاً قابل استفاده‌ست. نویسنده می‌گه معمولاً radio رو به select ترجیح می‌ده، ولی هر جا select لازم باشه از همین روش استفاده می‌کنه.

نکات کلیدی:

• برای فعال کردن استایل جدید باید روی select و ::picker(select) مقدار appearance: base-select رو بذاری.
• شبه‌المان‌های ::picker-icon و ::checkmark و شبه‌کلاس‌های :open و :checked برای استایل جزئیات هستن.
• Chrome، Edge، Opera و Safari 27 پشتیبانی می‌کنن ولی Firefox هنوز نه.
• پوشش فعلی حدود ۷۲ درصد کاربرهای جهانیه.
• مرورگرهای بدون پشتیبانی select پیش‌فرض رو نشون می‌دن، پس فرم هیچ‌وقت خراب نمی‌شه.