Özel Seçim Seçici Düzenleri

appearance: base-select CSS özelliği, <select> öğesini ve seçicisini (::picker(select) aracılığıyla) normal HTML öğeleri gibi biçimlendirme olanağı sunar. Grid veya Flexbox gibi modern CSS düzen teknikleriyle birleştirildiğinde, geleneksel dikey liste yapısından kurtulabilir ve özel JS olmadan zengin bir görsel deneyim oluşturabilirsiniz. Örneğin, seçenekleri 2D kart ızgarası olarak biçimlendirmek için display: grid kullanabilirsiniz.

Bu, renk seçiciler, emoji seçiciler veya zengin bir görsel menünün listeden daha etkili olduğu ürün varyantları için idealdir.

Nasıl uygulanır?

1. Temel Stil Oluşturma'yı Etkinleştirme

appearance: base-select özelliğini hem <select> öğesine hem de dahili seçici sözde öğesi select::picker(select)'ye uygulayın:

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

2. Seçici kapsayıcısını biçimlendirme

select:open::picker(select) öğesini hedefleyin ve display: grid (veya display: flex) uygulayın. Sütunları ve boşlukları her kapsayıcıda olduğu gibi tanımlayın.

select.grid-picker:open::picker(select) {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

ÖNEMLİ: :open gereklidir. select::picker(select) öğesini stillendirirseniz seçim kapalıyken bile seçici görünür olur.

3. Seçenekleri biçimlendirme

<option> öğelerini hedefleyerek ızgara öğeleri veya kartlar olarak biçimlendirin. Bunların içine resim, SVG veya karmaşık düzenler ekleyebilirsiniz.

/* Style options as grid cards */
.grid-picker option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* padding, border-radius, background, etc. */
}

4. Seçili seçeneği biçimlendirme

Seçili seçeneği biçimlendirmek için option:checked kullanın. Örneğin:

.grid-picker option:checked {
  position: relative;
  border: 2px solid var(--primary-color);
  background-color: oklab(from var(--primary-color) l a b / 8%);
}

Tüm kullanıcı arayüzü kontrollerinde olduğu gibi, durumu yalnızca renkle belirtmeyin ve hangi seçeneğin belirlendiğini belirtmek için birden fazla görsel gösterge (ör. renkler, kenarlık kalınlığı, onay işareti) kullanın.

5. (İsteğe bağlı) Seçili seçenek onay işaretini biçimlendirme

Varsayılan olarak tarayıcı, her <option> öğesinin ilk alt öğesi olarak bir onay işareti oluşturur.

content: "✓" / "" içeren bir ::before gibi davranır ve varsa yazar tarafından sağlanan ::before öğesinden önce oluşturulur.

Seçenek belirlenmezse onay işareti visibility: hidden aracılığıyla gizlenir.

::checkmark sözde öğesini kullanarak stilini belirleyebilir veya seçimi yalnızca stil aracılığıyla iletmek ya da özel bir gösterge kullanmak istiyorsanız tamamen gizleyebilirsiniz.

Örneğin, seçeneğin sağ üst köşesine yerleştirmek için aşağıdaki gibi bir işlem yapabilirsiniz:

select.grid-picker {
  > option::checkmark {
    /* Hide the checkmark for unselected options */
    display: none;
  }

  > option:checked {
    position: relative;

    &::checkmark {
      position: absolute;
      inset-block-start: -.4em;
      inset-inline-end: -.5em;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      min-inline-size: 1.6em;
      aspect-ratio: 1;
      padding-right: 0.12em;
      padding-left: 0.05em;
      border-radius: 50%;
      background: var(--primary-color);
      color: white;
      font-size: 70%;
      font-weight: bold;
    }
  }
}

İpucu: Onay işaretinin etrafına bir kapsayıcı (ör. daire) çizerken, şeklini hesaba katan optik ortalama için onay işaretini biraz yukarı doğru kaydırın (burada padding-bottom ve padding-left ile yaptığımız gibi). Bunun için padding-inline-start veya padding-block-end kullanmayın. Bunlar yazma moduna göre değişir ancak onay işaretinin şekli değişmez.

6. (İsteğe bağlı) Seçilen seçeneğin görünümünü özelleştirme

Varsayılan olarak <select>, seçilen seçeneğin yalnızca metin içeren bir sürümünü gösterir. Seçilen değer için zengin içerik görüntülemek üzere <button> içinde <selectedcontent> kullanın ve/veya seçilen seçeneği farklı şekilde görüntüleyin (ör. belirli ayrıntıları gizleyin).

<selectedcontent> öğesini, etrafında <button> olmadan KULLANMAYIN. Aksi takdirde <selectedcontent>, diğer içerik öğeleri gibi seçicinin bir parçası haline gelir.

En iyi uygulamalar

• 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.

Erişilebilirlik

Yerel <select> yalnızca doğrusal yukarı/aşağı ok gezinmesini işler. Bu nedenle, sol/sağ oklar açık seçicide hiçbir şey yapmaz ve yukarı/aşağı oklar, satır ve sütunlardan bağımsız olarak öğeler arasında sırayla gezinmeye devam eder.

Izgarayı takip eden yönlü gezinmeyi uygulamak için keydown öğesini kesebilir ve ok tuşları kullanıldığında odağı basılan yöndeki en yakın seçeneğe (ör. getBoundingClientRect() kullanarak) yönlendirebilirsiniz. Uygun sonraki/önceki öğeyi belirlemek için grid-template-columns veya grid-column gibi CSS dizelerini ayrıştırmak yerine gerçek geometri üzerinde çalışan DOM yöntemlerini (ör. getBoundingClientRect()) kullanın. Bu dizeler, karmaşık ızgaralar, alt ızgaralar, RTL ve diğer düzen senaryoları için kırılgan ve hataya açık olabilir. Bununla birlikte, gereksiz yere aşırı mühendislik yapmayın. Bu mantığı basitleştirmek için düzen hakkında doğru olduğunu bildiğiniz sabitleri kullanın.

Not: Bu yalnızca klavye ile gezinme için geçerlidir. <select> ve ::picker() öğeleri varsayılan rollerine (menu veya listbox) sahip olmaya devam eder. Bu roller geçersiz kılınamaz ve role="grid" içeren bir öğe barındıramaz. Seçicinin içine role="grid" içeren bir sarmalayıcı yerleştirmek pratikte işe yarar ancak geçerli değildir ve yardımcı teknoloji kullanıcılarını şaşırtabilir. Bazı durumlarda, seçenekleri gruplandırmak için <optgroup> kullanmak, role="grid" olmadan iyi bir ekran okuyucu kullanıcı deneyimi sağlayabilir. Aksi takdirde, ekran okuyucu kullanıcıları için istenen kullanıcı deneyimini elde etmek amacıyla popover API, sabitleme konumu ve role="grid" kullanan özel bir çözüme geçmeniz gerekebilir.

Yedek strateji

Ö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.
  }
});