يمكن الآن تخصيص العنصر <select> باستخدام CSS.

Adam Argyle

تاريخ النشر: 24 آذار (مارس) 2025

اعتبارًا من الإصدار 135 من Chrome، أصبح بإمكان مطوّري الويب ومصمّمي المواقع الإلكترونية استخدام عنصر <select> على الويب يمكن الوصول إليه ومتوافق مع معايير CSS ويمكن تطبيق أنماط عليه. استغرق إنشاء هذا المكوّن عدة سنوات وساعات طويلة من العمل الهندسي والتعاوني على المواصفات، والنتيجة هي مكوّن غني وفعّال بشكل لا يصدق لن يتعطّل في المتصفّحات القديمة.

في ما يلي فيديو يعرض اختيارات مخصّصة باستخدام هذه الميزات الجديدة:

تعرض هذه العروض التوضيحية Una وBrecht وAdam.

إذا كنت تتابع هذه العملية عن كثب، ستلاحظ أنّ بعض أسماء المواصفات والميزات قد تغيّرت منذ طلب Una للحصول على ملاحظات من المنتدى. لحسن الحظ، إذا كنت قد عملت من هذه المشاركة وكنت مهتمًا بمعرفة التغييرات التي طرأت، أعدّت لك "أونا" أيضًا مشاركة.

تتوفّر أيضًا مستندات جديدة ورائعة على MDN حول عنصر select القابل للتخصيص، وهي مليئة بالتفاصيل.

Meet appearance: base-select

خاصية CSS جديدة appearance: base-select تضع العنصر <select> في حالة جديدة قابلة للضبط والتصميم يُشار إليها عادةً باسم الأنماط "الأساسية":

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

يؤدي استخدام base-select إلى فتح قفل عدد من الميزات والسلوكيات الجديدة:

عند استخدام base-select، تفقد بعض الميزات والسلوكيات:

  • لا يتم عرض <select> خارج لوحة المتصفّح.
  • ولا يؤدي ذلك إلى تنشيط مكونات نظام التشغيل المضمّنة في الأجهزة الجوّالة.
  • يتوقف <select> عن استخدام عرض أطول <option>.

يمكن أن يتضمّن <select> الآن محتوى HTML غنيًا.

قبل أن تتمكّن من تخصيص <select>، إذا وضعت عناصر مثل صورة أو رسومات SVG في عنصر <option>، كان المتصفّح سيتجاهلها.

إليك رمز 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 في الخيار، وإلا لن يظهر.

تعرِض متصفّحات Chrome وSafari وFirefox عرض عنصر اختيار يتضمّن SVG. يعرض Chrome الصور، بينما يعرض Safari وFirefox المحتوى كما لو لم تكن هناك صور.
يمكنك تجربته في هذا الرابط على Codepen.

هناك خطر في إيقاف المواقع الإلكترونية الحالية التي تستخدم عنصر الاختيار القابل للتخصيص، وذلك بسبب تغييرات في المعالج. يتضمّن Chrome الميزات التي تستند إليها تجربة Finch في حال الحاجة إلى إيقافها في حالات الطوارئ. وإذا سارت الأمور على ما يرام، ستنتهي التجربة وسيتم إرسال الرمز إلى المصدر بشكل دائم.

قابلة للتخصيص بالكامل

يمكن استبدال كل جزء من base-select وتخصيصه وإضافة حركة إليه. في ما يلي عرض توضيحي يستخدم كل ميزة جديدة لإنشاء تجارب محدّدة معروفة ومفيدة.

يتم عرض أربع طرق مختلفة لعرض عنصر محدّد. يحتوي الجهاز الأول على نقطة خضراء لمؤشر الحالة، مع تصنيف &quot;مفعّل&quot;. يعرض القسم التالي الصور الرمزية بجانب الخيارات. أما الخيار الثالث، فهو أداة اختيار مساحة اللون التي تتضمّن تصنيفًا مخصّصًا مدمجًا في أداة الاختيار. يسمح الخيار الأخير باختيار حالة مسودة أو منشورة.
يمكنك تجربته في هذا الرابط على Codepen.

يمكنك العثور على المزيد من الأمثلة في قسم "الموارد" في نهاية هذه المشاركة.

واجهات JavaScript التي لم تتغيّر

لا تترتّب أي مخاطر على تفاعلات JavaScript الحالية مع عنصر <select>.

ومع ذلك، إذا بدأت في إضافة محتوى HTML غني إلى عناصر <option>، عليك اختبار القيم المحدّدة، لأنّ المتصفّح لا يزال يحلّل الصور وSVG ويتجاهلها. ومع ذلك، تغيّر المنطق لتحديد سلسلة المحتوى المحدّدة، وقد تحتاج إلى إجراء تعديلات استنادًا إلى الخيارات المتاحة لك.

إذا كنت تستخدم سمة value في <option>، لا داعي للقلق.

الموارد

كان Chrome أول متصفّح ينفّذ base-select، ولكن شارك كل متصفّح في المواصفات، وهناك المزيد من العناصر "الأساسية" التي لم تكتمل بعد. هذه ليست سوى البداية.

يُرجى متابعتنا لأنّنا سنواصل إضافة إرشادات وأمثلة ومراجع حول تخصيص عناصر محدّدة. إلى ذلك الحين، يمكنك الاطّلاع على الروابط التالية للحصول على مزيد من المعلومات.

نشكر جميع المشاركين في تحقيق هذا الإنجاز.