Yerleşik select açılır listeleri appearance: base-select ile gerçek CSS özelleştirmesi kazanıyor

Yerleşik açılır listeler sonunda gerçek CSS kabul ediyor

Web'in tarihinin büyük bölümünde select elementi biçimlendirmeye direndi. Açılır penceresi ve iç parçaları çoğunlukla işletim sistemi tarafından çiziliyordu ve appearance: none yalnızca varsayılan görünümün bir kısmını kaldırıyordu. Tasarım sistemleriyle uyumlu bir açılır liste gerektiren ekipler, kontrolü JavaScript ile sıfırdan yeniden inşa etmek zorunda kalıyor — ve beraberinde gelen klavye yönetimi, odak yönetimi ve erişilebilirlik işini de üstleniyordu. 22 Eylül 2026'da yayımlanan bir dev.to anlatımına göre platform artık bunun bir cevabına sahip: yerleşik kontrolü salt CSS ile özelleştirilebilir hale getiren ve aynı zamanda seçim ile form gönderimini yerleşik olarak koruyan yeni appearance: base-select değeri.

Tek bir CSS değeri her iki parçayı da devreye sokuyor

Özellik mevcut elementin yerini almak yerine onu genişletiyor. appearance: base-select değerini hem select elementine hem de ::picker(select) pseudo-elementi aracılığıyla açılır penceresine uyguluyorsunuz. Devreye girildiğinde birkaç yeni biçimlendirme kancası kullanılabilir hale geliyor: ::picker-icon oku hedefliyor, option::checkmark seçim işaretini biçimlendiriyor, option:checked o anda seçili öğeyi eşleştiriyor ve :open pseudo-class'ı açılır pencerenin genişletilip genişletilmediğini yansıtıyor.

dev.to makalesi, bu kuralların bir @supports (appearance: base-select) bloğuna sarılmasını öneriyor. Özelliğe sahip olmayan tarayıcılar bu durumda sıradan, biçimlendirilmemiş ama tamamen işlevsel bir select render ediyor.

Option'ların içinde zengin markup

Option'lar artık düz metinden daha zengin HTML içerebiliyor. Makaledeki örnek, her option'ın dairesel bir renk örneği ve bir metin etiketi içerdiği bir renk seçici. select'in ilk çocuğu olarak isteğe bağlı bir button, içindeki selectedcontent elementiyle kapalı kontrolde seçili option içeriğinin bir kopyasını gösteriyor — 'Nane' seçildiğinde hem renk örneği hem de butonda görünen etiket güncelleniyor. Açık value nitelikleri gönderilen verileri öngörülebilir kılıyor ve dekoratif renk örnekleri yardımcı teknolojilerden gizleniyor, böylece her option hâlâ okunabilir bir isme sahip oluyor.

Destek henüz Baseline değil

Yazarın 22 Eylül 2026'daki kontrolüne göre, anlatılan tek seçim özellikleri henüz Baseline değil; bu yüzden bunlara progressive enhancement olarak yaklaşılması öneriliyor. Makaledeki ekran görüntüleri Chromium 153.0.8010.0'dan geliyor ve Safari 27'in farklı temel stiller sunduğu bildiriliyor; yani biçimlendirilmemiş varsayılanların motorlar arasında aynı görünmesi beklenmemeli.

Pratik uyarılar

İki entegrasyon riskine dikkat çekiliyor:

• Dokunmatik cihazlarda devreye sokulmuş bir seçici tarayıcı viewport'unun içinde kalıyor ve işletim sisteminin alışılmış seçicisinin yerini alıyor; bu yüzden mobil test şart.

• Zengin select markup'ı framework'lerde parser hatalarını veya SSR hydration sorunlarını ortaya çıkarabilir. Makale, framework ve yardımcı teknoloji kombinasyonlarınızı test etmenizi, yerleşik semantiği testin yerine geçen bir şey değil temel olarak görmenizi tavsiye ediyor.

Ayrıca ikon veya resim eklerken bile her option'da okunabilir metin bulundurmayı, uygun bir label kullanmayı, klavye odağını görünür tutmayı ve option içeriğini etkileşimsiz bırakmayı öneriyor.

Neden önemli

Select açılır listesi web'de en sık yeniden inşa edilen yerleşik bileşenlerden biri ve elle yazılmış yerine koymalar sürekli bir erişilebilirlik hatası kaynağı. Biçimlendirme katmanının platformun kendisine taşınması, geliştiricilerin yerleşik semantik, klavye davranışı ve form entegrasyonunu korurken tasarım sistemiyle uyumlu olmasını sağlıyor — bu da potansiyel olarak bütün bir JavaScript widget kategorisini emekliye ayırıyor. Karşılığında ise tarayıcı desteğinin eşitsiz ve varsayılan stillerin farklı olduğu bir geçiş dönemi var; bu da @supports kontrollerini ve gerçek cihaz testlerini giriş bileti yapıyor.