Markalı Seçim Stili

Özelleştirilebilir select API, <select> öğelerini markanızın tasarım sistemine mükemmel şekilde uyacak şekilde stillendirmek için bildirim temelli, CSS tabanlı bir yöntem sunar. appearance: base-select özelliğini etkinleştirerek select öğesinin dahili gölge DOM'una erişebilirsiniz. Bu sayede düğmeyi, seçenek seçici listesini, ok simgesini ve onay işareti göstergesini standart CSS özelliklerini kullanarak stillendirebilirsiniz.

Daha önce, tamamen markalı bir seçim elde etmek için kontrolün JavaScript ile sıfırdan yeniden oluşturulması gerekiyordu. Bu da genellikle erişilebilirliği, klavye gezinmesini ve yerel form entegrasyonunu bozuyordu. appearance: base-select ile özel bir görünüm elde ederken tarayıcı; odak yönetimini, üst katman oluşturmayı ve erişilebilirlik bağlamalarını yönetir.

Nasıl uygulanır?

Markalı seçim stilini uygulamak için:

1. Özelleştirmeyi etkinleştirme: appearance: base-select özelliğini hem <select> öğesine hem de ::picker(select) sözde öğesine (açılır seçenek listesini hedefleyen) uygulayın.
2. Özel düğmeyi yapılandırma (isteğe bağlı): Varsayılan tetikleyiciyi değiştirmek için doğrudan <select> içinde bir <button> öğesi tanımlayın. Seçili seçeneğin metnini veya içeriğini temsil etmek için bu düğmenin içindeki <selectedcontent> öğesini kullanın.
3. Seçici listesini stillendirme: Açılır listeye tipografi, arka plan renkleri, kenarlıklar ve gölgeler uygulamak için ::picker(select) sözde öğesini kullanın. Tarayıcı bunu üst katmanda oluşturur ve z-index çakışmalarını geçmişte bırakır.
4. Dahili simgeleri biçimlendirme:
   • Ok simgesini biçimlendirmek veya değiştirmek için select::picker-icon kullanın.
   • Etkin seçeneğin yanındaki onay işareti göstergesini biçimlendirmek için option::checkmark kullanın.
5. Stil Seçenekleri: Fareyle üzerine gelme durumları, dolgu ve düzen için <option> öğelerine stil uygulayın.

Örnek Kod: Markalı Kurye Seçimi

Aşağıdaki örnekte, belirli bir "paket" marka estetiğine uyacak şekilde sabit boşluklu yazı tipi ve kesikli kenarlıklarla biçimlendirilmiş özel bir seçim gösterilmektedir.

/* Enable customization for the select and its picker */
.brand-select,
.brand-select::picker(select) {
  appearance: base-select;
}

/* Style the visible trigger button */
.brand-select {
  font-family: 'Courier New', monospace;
  background-color: #fffaf0;
  color: #8b4513;
  border: 2px dashed #8b4513;
  border-radius: 4px;
  padding: 0.75rem;
  font-size: 1rem;
  cursor: pointer;
}

/* Style the dropdown options list */
.brand-select::picker(select) {
  font-family: 'Courier New', monospace;
  background-color: #fffaf0;
  border: 2px dashed #8b4513;
  border-radius: 4px;
  padding: 0.5rem;
}

/* Customize internal part colors to match text */
.brand-select::picker-icon {
  color: #8b4513;
}

.brand-select option::checkmark {
  color: #8b4513;
}

/* Style individual options and hover effects */
.brand-select option {
  padding: 0.5rem;
  border-radius: 4px;
  color: #8b4513;
  cursor: pointer;
}

.brand-select option:hover {
  background-color: #fdf5e6;
}

<label for="preferences">Select shipping preference</label>
<select class="brand-select" id="preferences" name="preferences">
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="standard">Standard Shipping</option>
  <option value="express" selected>Express Shipping</option>
  <option value="overnight">Overnight Delivery</option>
</select>

Stratejik Uygulama ve En İyi Uygulamalar

• Tasarım sisteminiz, standart tarayıcılar arası seçim geçersiz kılma işlemleriyle elde edilemeyen tüm form kontrollerinde yüksek doğruluk ve görsel tutarlılık gerektiriyorsa appearance: base-select öğesini KULLANIN.
• İşletim sisteminin yerel seçici deneyimini (ör. iOS cihazındaki standart kaydırma tekerleği seçici) kullanıyorsanız bu özelliği KULLANMAYIN. base-select etkinleştirildiğinde, yerel mobil kullanıcı arayüzü kontrolleri devre dışı bırakılır ve web'de oluşturulan üst katman menüleri kullanılır.
• Renk kontrastının WCAG standartlarını karşıladığını doğrulayın. Özelleştirilebilir seçici, geçici renkler ayarlamanıza olanak tanır ancak metnin özel arka planlarda okunabilir olmasını sağlamak sizin sorumluluğunuzdadır.
• Düzen davranışını test edin. appearance: base-select ayarı, seçimi en uzun seçenek genişliğine göre boyutlandırma şeklindeki varsayılan tarayıcı davranışını kaldırır. Düzen kaymalarını önlemek için sabit bir genişlik ayarlamanız veya flex/grid kısıtlamaları kullanmanız gerekebilir.
• <select> öğenizin bir name özelliğine ve ilişkili bir <label> özelliğine sahip olduğundan emin olun. Bu sayede, özel bir kullanıcı arayüzü olsa bile bileşen ekran okuyucular tarafından erişilebilir durumda kalır ve standart form gönderimleriyle doğru şekilde çalışır.
• Form gönderiminin eskisi gibi çalışması için seçeneklerde standart value özelliklerini kullanın.

Yedek stratejiler

Özelleştirilebilir <select> için yedekler ve tarayıcı desteği

Henüz appearance: base-select öğesini desteklemeyen tarayıcılar için <select> öğesi, standart bir işletim sistemi açılır listesine sorunsuz bir şekilde indirgenir.

• Metin Olmayan İçerik Yok Sayılır: Eski tarayıcılar, <option> etiketlerinin içindeki HTML etiketlerini (<svg> veya <div> gibi) kaldırır ve yalnızca metin düğümlerini oluşturur. <option> öğesinin metin içeriğinin okunabilir ve kendi başına anlamlı olduğundan emin olun.
• HTML Yapısı İşleme: Standart ayrıştırıcılar, <select> içindeki <button> ve <selectedcontent> etiketlerini yoksayabilir veya geçersiz olarak değerlendirebilir. Standart metni okunabilir bir yedek olarak görüyorsanız progresif geliştirme için ağır JavaScript polyfill'leri kesinlikle gerekli değildir.

document.addEventListener("DOMContentLoaded", () => {
  // Check if browser supports base-select value
  if (!CSS.supports("appearance", "base-select")) {
    // Custom select overrides are not supported natively.
  }
});