سبک‌بندی انتخاب نمانام

میانای برنامه‌سازی کاربردی انتخاب سفارشی‌سازی‌شدنی روشی اعلانی و مبتنی بر CSS برای سبک‌دهی به عناصر <select> ارائه می‌دهد تا کاملاً با سیستم طراحی نمانام شما مطابقت داشته باشد. با انتخاب کردن appearance: base-select، به DOM سایه داخلی عنصر انتخاب دسترسی پیدا می‌کنید که به شما امکان می‌دهد بااستفاده از ویژگی‌های CSS استاندارد، دکمه، فهرست انتخابگر گزینه‌ها، نماد پیکان، و نشانگر علامت تیک را سبک‌بندی کنید.

قبلاً، برای دستیابی به یک انتخاب کاملاً با نمانام، لازم بود کنترل از ابتدا با جاوا اسکریپت بازسازی شود، که اغلب دسترس‌پذیری، پیمایش صفحه‌کلید، و ادغام فرم بومی را مختل می‌کرد. با 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

مثال زیر یک انتخاب سفارشی را نشان می‌دهد که با قلم تک‌فاصله و حاشیه‌های خط‌چین طراحی شده است تا با زیبایی‌شناسی نمانام «parcel» مطابقت داشته باشد.

/* 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، کنترل‌های میانای کاربر تلفن همراه بومی غیرفعال می‌شود و منوهای لایه بالایی با پردازش وب جایگزین می‌شود.
• باید بررسی کنید که کنتراست رنگ با استانداردهای WCAG مطابقت داشته باشد. انتخابگر سفارشی‌سازی‌شدنی به شما امکان می‌دهد رنگ‌های موردی تنظیم کنید، اما مسئولیت اطمینان از خوانا ماندن نوشتار در پس‌زمینه‌های سفارشی با شما است.
• رفتار چیدمان را آزمایش کنید. تنظیم appearance: base-select رفتار پیش‌فرض مرورگر را برای اندازه‌گیری انتخاب براساس طولانی‌ترین عرض گزینه حذف می‌کند. ممکن است لازم باشد عرض ثابتی تنظیم کنید یا از محدودیت‌های flex/grid برای جلوگیری از تغییرات طرح‌بندی استفاده کنید.
• مطمئن شوید <select> دارای مشخصه name و <label> مرتبط باشد. این کار تضمین می‌کند که حتی با واسط کاربر سفارشی، مؤلفه برای صفحه‌خوان‌ها دسترس‌پذیر باقی بماند و با ارسال‌های فرم استاندارد به‌درستی کار کند.
• از مشخصه‌های استاندارد value در گزینه‌ها استفاده کنید تا مطمئن شوید ارسال فرم دقیقاً مثل قبل کار می‌کند.

راهبردهای جایگزین

جایگزین‌ها و پشتیبانی مرورگر برای <select> قابل‌سفارشی‌سازی

برای مرورگرهایی که هنوز از appearance: base-select پشتیبانی نمی‌کنند، عنصر <select> به‌طور مناسب به منو کرکره‌ای سیستم‌عامل استاندارد تنزل می‌یابد.

• نادیده گرفتن محتوای غیرنوشتاری: مرورگرهای قدیمی‌تر تگ‌های HTML (مثل <svg> یا <div>) را در تگ‌های <option> حذف می‌کنند و فقط گره‌های نوشتاری را ارائه می‌دهند. مطمئن شوید محتوای نوشتاری <option> به‌تنهایی خوانا و معنادار باشد.
• مدیریت ساختار HTML: تجزیه‌کننده‌های استاندارد ممکن است برچسب‌های <button> و <selectedcontent> را در <select> نادیده بگیرند یا آن‌ها را نامعتبر تلقی کنند. اگر نوشتار استاندارد را به‌عنوان جایگزین خوانا درنظر بگیرید، برای ارتقای پیش‌رو به شبیه‌سازهای مرورگر جاوا اسکریپت سنگین نیازی نیست.

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