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

Una Kravets
Chrome 119'da select öğesi, Safari 17'de de kullanıma sunulan bir özellikle küçük ama güçlü bir yükseltme aldı. 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.

Seçimdeki saati gösteren öncesi ve sonrası ekran görüntüsü. Sonraki resimde gruplar arasında ayırıcılar var.

Bunu yapmak için aşağıdaki HTML'de gösterildiği gibi seçenek 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>
belgesine bakın.

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.