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

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

لقطة شاشة لـ &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 في المستقبل.