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

Una Kravets
Una Kravets
Seçili öğe Chrome 119'da küçük ama etkili bir yükseltmeyle birlikte Safari 17'de de kullanıma sunulmuştur. Artık seçim seçenekleri listesine <hr> (yatay cetvel) öğelerini ekleyebilirsiniz. Bu öğeler, daha iyi bir kullanıcı deneyimi için seçenekleri görsel olarak bölmeye yardımcı olmak amacıyla ayırıcı olarak görünür.

Saat seçiliyken öncesi ve sonrası ekran görüntüsü. Sonraki resimde, gruplar arasında ayırıcılar vardır.

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. Form denetimlerinin nasıl tamamen uyumlu hale getirileceği de dahil olmak üzere geleceği hakkında daha fazla bilgi için popover API hakkında bilgi edinin ve gelecekte kullanıma sunulacak selectlist öğesini göz önünde bulundurun.