<select> öğesi artık CSS ile özelleştirilebilir

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Adam Argyle

Yayınlanma tarihi: 24 Mart 2025

Chrome 135'ten itibaren web geliştiricileri ve tasarımcıları nihayet web'de erişilebilir, standartlaştırılmış ve CSS stili uygulanabilir bir <select> öğesi üzerinde birleşebilir. Bu çalışmanın tamamlanması yıllar sürdü ve çok sayıda mühendislik ve ortak çalışmayla ilgili spesifikasyon çalışması yapıldı. Sonuç olarak, eski tarayıcılarda çalışmayı durdurmayacak inanılmaz derecede zengin ve güçlü bir bileşen ortaya çıktı.

Bu yeni özellikleri kullanarak özelleştirilmiş seçimleri gösteren bir videoyu aşağıda bulabilirsiniz:

Gelişmeleri yakından takip ediyorsanız Una'nın topluluk geri bildirimi isteğinde bulunmasından bu yana birkaç özellik adının ve özelliğin değiştiğini fark edeceksiniz. Bu yayından yararlandıysanız ve nelerin değiştiğini öğrenmek istiyorsanız Una'nın hazırladığı bu makaleden yararlanabilirsiniz.

Ayrıca, MDN'de özelleştirilebilir select için ayrıntılı yeni bir doküman da mevcuttur.

appearance: base-select ile tanışın

<select> öğesini genellikle "temel" stiller olarak adlandırılan yeni, yapılandırılabilir ve stillenebilir bir duruma getiren yeni bir CSS özelliği appearance: base-select:

.custom-select {
  &, &::picker(select) {
    appearance: base-select;    
  }
}

base-select'ü kullanmak, bir dizi yeni özelliğin ve davranışın kilidini açar:

• <select> içindeki içerikler için tarayıcının HTML ayrıştırıcısını değiştirir.
• <select> öğesinin oluşturulan iç yapısını değiştirir.
• <select> için yeni dahili parçalar ve durumlar gösterir.
• Özelleştirme için optimize edilmiş yeni ve minimal bir görünüm.
• Gösterilen seçenekler, pop-up gibi üst katmandadır.
• anchor() ile konumlandırılmış gösterilen seçenekler.

base-select kullanıldığında bazı özellikler ve davranışlar kaybedilir:

• <select>, tarayıcı bölmesinin dışında oluşturulmaz.
• Yerleşik mobil işletim sistemi bileşenlerini tetiklemez.
• <select>, en uzun <option> öğesinin genişliğini almayı durdurur.

<select> artık zengin HTML içeriği içerebilir

Bir <select> öğesini özelleştirmeden önce <option> öğesine resim veya SVG gibi öğeler eklerseniz tarayıcı bunları yoksayar.

Aşağıdaki HTML'yi ele alalım. Tarayıcı, bu HTML'yi siz yazdığınız şekilde okur:

<select class="custom-select">
  <option>
    <svg aria-hidden>…</svg>
    <span>HTML</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>CSS</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>JavaScript</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>WASM</span>
  </option>
</select>

Ancak kullanılan DOM, <svg> öğesini içermez:

<select class="custom-select">
  <option>
    <span>HTML</span>
  </option>
  <option>
    <span>CSS</span>
  </option>
  <option>
    <span>JavaScript</span>
  </option>
  <option>
    <span>WASM</span>
  </option>
</select>

Aşağıda, önceki HTML'yi (soldan sağa) Chrome, Safari ve Firefox'un oluşturması gösterilmektedir. Tarayıcı appearance: base-select'ü destekliyorsa SVG seçeneğini görürsünüz. Aksi takdirde bu seçenek gösterilmez.

Ayıklama aracındaki değişiklikler nedeniyle, özelleştirilebilir seçeneğe sahip mevcut web sitelerinin bozulma riski vardır. Chrome, acil olarak devre dışı bırakılması gerektiğinde Finch denemesinin arkasındaki özellikleri barındırır. Her şey yolunda giderse deneme sona erer ve kod kalıcı olarak kaynağa gönderilir.

Tamamen özelleştirilebilir

base-select öğesinin her bir parçası değiştirilebilir, özelleştirilebilir ve animasyonlu hale getirilebilir. Tanınabilir ve anlamlı seçim deneyimleri oluşturmak için her yeni özelliği kullanan bir demoyu burada bulabilirsiniz.

Bu yazının sonundaki kaynaklar bölümünde daha fazla örnek bulabilirsiniz.

Değişmeyen JavaScript arayüzleri

<select> öğesiyle mevcut JavaScript etkileşimlerinizde risk yoktur.

Ancak <option> öğelerinize zengin HTML eklemeye başlarsanız tarayıcı resimleri ve SVG'yi ayrıştırıp yoksayarak işlemeye devam ettiğinden, seçili değerleri test etmeniz gerekir. Bununla birlikte, seçilen içerik dizesini belirleme mantığı değişti ve seçeneklerinize bağlı olarak düzenlemeler yapmanız gerekebilir.

value özelliğini <option> üzerinde kullanıyorsanız endişelenmenize gerek yoktur.

Kaynaklar

Chrome, base-select'ü ilk uygulayan tarayıcı oldu ancak her tarayıcı spesifikasyonlara katıldı ve henüz tamamlanmamış daha fazla "temel" öğe var. Bu sadece başlangıç.

Belirli öğeleri özelleştirmeyle ilgili yönergeler, örnekler ve kaynaklar eklemeye devam edeceğiz. O zamana kadar daha fazla bilgi için aşağıdaki bağlantılara göz atın.

• Web Standartları
  • UI-Select'i açma
  • HTML spesifikasyonu için çekme isteği
  • Gönderim Amacı
  • MDN
• Chrome
  • Yorum İsteği ve Muhteşem Una Açıklaması
  • Yorum İsteği Sonuçları
  • <hr>'u <select>'de kullanma
  • Una, parçaları açıklıyor
  • Una Codepen koleksiyonu
• Topluluk
  • Brecht De Ruyte Codepen Koleksiyonu
  • Yerel ve özel seçicilerde CSS'de kullanabileceğiniz püf noktaları
  • Öğeler arayüzünü aç-<select>
  • Geçiş animasyonlarıyla özel seçim örneği

Bu başarının elde edilmesine katkıda bulunan herkese özel teşekkürler.