تحديد عنصر: الآن مع قواعد أفقية

تم إجراء ترقية صغيرة ولكن فعّالة للعنصر select في الإصدار 119 من Chrome، مع ميزة تم طرحها أيضًا في الإصدار 17 من Safari. أصبح بإمكانك الآن إضافة عناصر <hr> (القاعدة الأفقية) إلى قائمة الخيارات المحدّدة، وستظهر كفواصل للمساعدة في تقسيم الخيارات بشكل مرئي لتحسين تجربة المستخدم.

لقطة شاشة لـ &quot;قبل&quot; و&quot;بعد&quot; مع تحديد &quot;الساعة&quot;. تحتوي الصورة &quot;بعد&quot; على فواصل بين المجموعات.

لتحقيق ذلك، أضِف عناصر <hr> إلى قائمة الخيارات كما هو موضّح في رمز HTML التالي:

<label for="major-select">Please select a major:</label> <br/>

<select name="majors" id="major-select">
  <option value="">Select a major</option>
  <hr>
  <option value="arth">Art History</option>
  <option value="finearts">Fine Arts</option>
  <option value="gdes">Graphic Design</option>
  <option value="lit">Literature</option>
  <option value="music">Music</option>
  <hr>
  <option value="aeroeng">Aerospace Engineering</option>
  <option value="biochemeng">Biochemical Engineering</option>
  <option value="civileng">Civil Engineering</option>
  <option value="compeng">Computer Engineering</option>
  <option value="eleng">Electrical Engineering</option>
  <option value="mecheng">Mechanical Engineering</option>
</select>

يمكن أن تُحدث التغييرات الصغيرة فرقًا في المستخدمين. لمزيد من المعلومات حول مستقبل عناصر التحكّم في النماذج، بما في ذلك كيفية جعلها قابلة للتنسيق بالكامل، اطّلِع على واجهة برمجة التطبيقات popover API وانتبِه إلى عنصر selectlist في المستقبل.