Öğe seçin: artık yatay kurallarda

Select element, Chrome 119'da küçük ama önemli bir yükseltme yapmıştır. Bu özellik de Safari 17'de kullanıma sunulmuştur. Artık seçim seçenekleri listesine <hr> (yatay kural) öğeleri ekleyebilirsiniz. Bu öğeler, daha iyi bir kullanıcı deneyimi sunmak için seçeneklerin görsel olarak ayrılmasına yardımcı olmak için ayırıcı olarak gösterilir.

Bunu yapmak için aşağıdaki HTML'de gösterildiği gibi seçenekler listesine <hr> öğeleri ekleyin:

<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>

Küçük değişiklikler kullanıcılarınız için fark yaratabilir. Tamamen şık hale getirilmesi dahil olmak üzere, form denetimlerinin geleceğiyle ilgili daha fazla bilgi için popover API hakkında bilgi edinin ve gelecekte kullanıma sunulacak selectlist öğesini kontrol edin.