Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

Adam Argyle

Yayınlanma tarihi: 24 Mart 2025

Web geliştiriciler ve tasarımcılar, Chrome 135'ten itibaren web'de erişilebilir, standartlaştırılmış ve CSS ile stil verilebilen bir <select> öğesinde bir araya gelebilir. Bu özellik, yıllar süren bir geliştirme sürecinin, mühendislik ve ortak spesifikasyon çalışmalarının sonucunda ortaya çıktı. Sonuç olarak, eski tarayıcılarda çalışmaya devam eden inanılmaz derecede zengin ve güçlü bir bileşen elde edildi.

Bu yeni özelliklerin kullanıldığı özelleştirilmiş seçkilerle ilgili videoyu aşağıda bulabilirsiniz:

Una, Brecht ve Adam'ın demolarını içerir.

Gelişmeleri yakından takip ediyorsanız Una'nın topluluktan geri bildirim isteğinden bu yana birkaç spesifikasyon adının ve özelliğin değiştiğini fark edeceksiniz. Neyse ki bu yayından yararlandıysanız ve nelerin değiştiğini öğrenmek istiyorsanız Una'nın bu konudaki yayınına göz atabilirsiniz.

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

Meet `appearance: base-select`

appearance: base-select öğesini, genellikle "temel" stiller olarak adlandırılan yeni, yapılandırılabilir ve stil verilebilir bir duruma getiren yeni bir CSS özelliği appearance: base-select:<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ç kısımlarını değiştirir.
<select> için yeni dahili parçaları ve durumları kullanıma sunar.
Özelleştirme için optimize edilmiş yeni ve minimalist bir görünüm.
Gösterilen seçenekler, popover gibi en üst katmandadır.
Gösterilen seçenekler anchor() ile konumlandırılır.

base-select kullanıldığında bir dizi özellik ve davranış kaybolur:

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

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

Daha önce bir <select> öğesini özelleştirebiliyordunuz. <option> öğesine resim veya SVG gibi şeyler yerleştirdiğinizde tarayıcı bunları yoksayıyordu.

Aşağıdaki HTML'yi ele alalım. Tarayıcı, bu HTML'yi sizin 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>

Yukarıdaki HTML'yi (soldan sağa) Chrome, Safari ve Firefox'ta oluşturma işlemi gösterilmektedir. Tarayıcı appearance: base-select öğesini destekliyorsa seçenekte SVG görünür, aksi takdirde görünmez.

Chrome, Safari ve Firefox'ta SVG ile seçme işlemi gösteriliyor. Chrome resimleri gösterir, Safari ve Firefox ise resim yokmuş gibi oluşturur. — Bu Codepen'de deneyin.

Ayrıştırıcı değişiklikleri nedeniyle, özelleştirilebilir seçim içeren mevcut web sitelerinin bozulma riski vardır. Acil durumlarda kapatılması gerekebileceği için Chrome'da Finch denemesinin arkasındaki özellikler bulunur. İşler yolunda giderse deneme sona erer ve kod kaynakta kalıcı olarak yayınlanır.

Tamamen özelleştirilebilir

base-select'nın her bölümü değiştirilebilir, özelleştirilebilir ve animasyon eklenebilir. Tanıdık ve anlamlı seçim deneyimleri oluşturmak için tüm yeni özelliklerin kullanıldığı bir demoyu burada bulabilirsiniz.

Seçili bir öğenin dört farklı sunumu gösteriliyor. Birincisinde, üzerinde "Açık" etiketi bulunan yeşil bir durum göstergesi noktası var. Sonraki resimde, seçeneklerin yanında avatarlar gösterilmektedir. Üçüncüsü ise seçimde yerleşik özel etikete sahip bir renk alanı seçicidir. Son seçenek, taslak veya yayınlanmış durumları seçmeye olanak tanır. — Bu Codepen'de deneyin.

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

Değişmeyen JavaScript arayüzleri

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

Ancak <option> öğelerinize zengin HTML eklemeye başlarsanız tarayıcı, resimleri ve SVG'yi ayrıştırıp yoksaymaya devam edeceğinden seçilen değerleri test etmeniz gerekir. Ancak seçilen içerik dizesini belirleme mantığı değişti. Seçeneklerinizde ne olduğuna bağlı olarak ayarlama yapmanız gerekebilir.

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

Kaynaklar

base-select özelliğini ilk uygulayan Chrome olsa da tüm tarayıcılar spesifikasyonlara katıldı ve henüz tamamlanmamış daha fazla "temel" öğe var. Bu sadece bir başlangıç.

Belirli öğeleri özelleştirme konusunda rehberlik, örnekler ve kaynaklar eklemeye devam edeceğimiz için bizi takip etmeye devam edin. Bu süre zarfında daha fazla bilgi için aşağıdaki bağlantılara göz atabilirsiniz.

Bu etkinliğin gerçekleşmesinde emeği geçen herkese teşekkür ederiz.