عنصر را انتخاب کنید: اکنون با قوانین افقی

عنصر انتخاب شده با قابلیتی که در Safari 17 نیز وجود دارد، ارتقای کوچک اما قدرتمندی در کروم 119 دریافت می کند. اکنون، می‌توانید عناصر <hr> (قاعده افقی) را به لیست گزینه‌های انتخابی اضافه کنید و آنها به عنوان جداکننده ظاهر می‌شوند تا به تجزیه بصری گزینه‌ها برای تجربه کاربری بهتر کمک کنند.

اسکرین شات قبل و بعد با hr در انتخاب. تصویر بعد دارای تقسیم کننده هایی بین گروه ها است.

برای رسیدن به این هدف، عناصر <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 بیاموزید و مراقب عنصر فهرست انتخابی آینده باشید.