10 Ücretsiz CSS ve JavaScript Select Box Snippet'i

Varsayılan HTML seçim kutuları, onlarca yıldır bize iyi hizmet etti. Ama modern çağda, onların biraz... bayat olduğunu söylemek doğru olur.

Tasarımcılar daha iyisini yapabilir ve CSS'deki gelişmeler sayesinde seçim kutularını özelleştirmek kolaydır. Çevrimiçi olarak ücretsiz olarak sunulan tüm açık kaynak kodlarından bahsetmiyorum bile.

El yapımı seçme kutusu stilleri için en iyi 10 seçimimden oluşan bir koleksiyonun küratörlüğünü yaptım. Bunlar eklenti olarak yayınlanmaz, bunun yerine JavaScript ve CSS özelleştirmesi için şablonlara dayanır. Ancak hepsinin kurulumu ve hatta kendi amaçlarınız için yeniden şekillendirilmesi kadar kolaydır.

1. Özel Seçim Menüsü

Koleksiyonu başlatmak, Wallace Erick'in özel seçilmiş menü stilleridir.

Yeniden biçimlendirme için CSS'yi ve menülerin UX'ini yapılandırmak için JavaScript'i kullanır. Standart HTML seçimlerinden biraz farklı davranıyorlar ve bence kullanımları biraz daha iyi.

Menünün boyutunu ve renk stilini seçebilir veya Wallace'ın varsayılanlarıyla çalışabilirsiniz. Hepsinden iyisi, yeniden biçimlendirmeyi denediyseniz, bunun zor olduğunu anlayacağınız özel bir yükleme alanı tasarımı içerir.

İşe yarayan temiz ama taze görünümlü seçkin menüler istiyorsanız, başlamak için mükemmel bir yer.

2. Basit Seçim

İşte her düzene daha doğal bir şekilde uyum sağlamayı amaçlayan çok basit bir seçim kutusu daha.

Bu, düz siyah beyaz renk şemasıyla daha ince renklere dayanır. Ancak, seçim menüsünü görünüm içinde ve dışında canlandırmak için JavaScript'i de kullanır.

Tıpkı seçim alanı gibi davranan gizli bir giriş alanını hedefleyerek çalışır. Bu çözüm teknik olarak gerçek <select> öğesini kullanmadığından, bu şekilde ön uçtan formlarınıza veri çekmeye devam edebilirsiniz.

Uyumluluk bir endişe ise, bunu atlayın. Ancak tasarımın muhteşem olduğunu ve masaüstü trafiği için mükemmel olacağını kabul etmeliyim.

3. Sucky Olmayan HTML Açılır Listeleri

Adından da anlaşılacağı gibi, bu seçkin menü paketi sadece emmeyi değil. Hepsinin farklı stilleri ve boyutları vardır ve isteğe bağlı olarak renkleri değiştirmek için tıklayabileceğiniz düğmeler vardır.

Açıkçası, bu özelliği kendi düzeninizden kaldırabilir ve siteniz için çalışan bir şemaya bağlı kalabilirsiniz. Ancak genel olarak bu seçkin menüler normal bir menü gibi çalışır ve kullanımları harikadır.

Uyumluluk konusunda endişeleriniz varsa, bu şablonla çalışmayı düşünün.

Çoğu değişiklik kozmetiktir, bu nedenle kullanıcı davranışını çok fazla etkilememelidir.

4. Yer Tutucu Seçimi

Bu yer tutucu seçme menüsünün gerçek tasarımı muhteşem, ancak buradaki tek faktör tasarım değil.

Geliştirici James Nowland, bu menüyü, seçim seçeneğinden varsayılanı kaldırmak amacıyla oluşturdu. Bu, alan boşken gördüğünüz metin alanlarında daha çok bir yer tutucu gibi davrandığı, ancak bir değer ayarladığınızda kaybolduğu anlamına gelir.

Tamamen uyumludur ve gerçek HTML seçme öğesiyle çalışır. Kullanıcı bir seçim yaptığında, bir seçenek alanı varsayılan olarak gizlenir. Bu şekilde, açılır menünün hiçbir yerinde "bir seçenek belirleyin" metnini görmezsiniz. Gerçekten yaratıcı bir çözüm!

5. Düz Tasarım

Estetik genellikle web tasarımında önemlidir ve bu düz seçim menüsü harika bir örnektir.

Hala tipik bir seçim gibi çalışıyor ve açılır kısım hiç değiştirilmedi. Ancak yalnızca seçimin yeniden biçimlendirilmesi sayfayı canlandırıyor. Çirkin tarayıcı varsayılanından çok daha klas hissediyor.

Hatta bu şablonu alabilir ve açılır alana uygulanan kendi düz stillerinizle genişletebilirsiniz. Tamamen senin araman!

Ancak bir başlangıç ​​şablonu olarak bu, herhangi bir arayüz için en basit seçeneklerden biridir.

6. Saf CSS

Tüm tasarım sürecini basitleştirdiği için JavaScript yerine saf CSS'nin büyük bir hayranıyım. Bu kolay değil ama orada çok fazla çözüm var.

Favorilerimden biri, yalnızca saf CSS seçme menülerini değil, radyoları ve onay kutularını da içeren bu snippet.

Hepsi olağanüstü görünüyor ve her türlü düzene uyum sağlamalı. CSS'de düzenlemeler yapmak için tam kontrole sahipsiniz ve hepsinden iyisi, tüm büyük tarayıcılarda da çalışması gerekir.

7. Tarz Erişilebilir Açılır Menüler

İşte belirli menülerle neler yapabileceğinize dair daha stilize edilmiş örneklerden biri. Andy Fitzsimon tarafından oluşturulan bu snippet, açılır menü efekti için JavaScript'e dayanır ve degradeler ve ok simgeleri için özel CSS kullanır.

Güzel olan şu ki, bu menü ayrıca no-JS özelliğini de destekliyor, bu yüzden JavaScript devre dışı bırakılsa bile çalışacak. Buna zarif bozulma denir ve erişilebilirlik için bir web geliştiricisinin en iyi arkadaşıdır.

Yine de bu seçkin menüler, 2017 ve sonrası için bir tasarıma uymayabilecek eski tarz web 2.0 gradyanlarını çalıştırıyor.

Ancak bu, belirli menüleri biraz yaratıcılıkla istediğiniz yere götürebileceğinizi gösteriyor. Ve bunları biraz özelleştirmek için CSS'yi hacklerseniz, bunlar şaşırtıcı derecede iyi çalışabilir.

8. SVG Simge Menüsü

Varsayılan seçim menüleri, yan tarafta ok simgesine sahiptir ve başka pek bir şey yoktur. Biraz SVG büyüsü ile bunu istediğiniz herhangi bir simgeye dönüştürebilirsiniz.

Bu özel menü, saf bir SVG dosyasıyla çalışan kendi artı simgesi tasarımına sahiptir. Menüyü genişletmek için tıkladığınızda, kapatmak/gizlemek için bir X simgesine animasyon uygulayacaktır.

Daha önce hiç böyle bir şey görmemiştim ve bu, web tarayıcılarının sınırlarını ne kadar zorladığımızı gösteriyor.

Ne yazık ki bu, yerel HTML seçme öğesinde çalışmaz . Bir div içindeki liste öğelerinin bir koleksiyonudur, bu nedenle bir değer seçildiğinde gizli bir giriş alanını hedeflemesi gerekir.

Neyse ki bu süreç gerçekten kolay, bu yüzden bu tasarımı sitenizde istiyorsanız, onu çalıştırmak için fazla uğraşmanıza gerek yok.

9. Kutu Deneyini Seçin

İşte gerçekten gözüme çarpan deneysel bir tasarım. Karşılaştırma demo ekranı, bunun normal seçili menülerden ne kadar farklı olduğunu ve kullanıcı deneyimini nasıl değiştirdiğini gösterir.

Menüyü açmak için ilk dokunduğunuzda/tıkladığınızda, tam animasyon efektleriyle aşağı kayar. Ancak, sayfada başka bir yere tıkladığınızda gizlenen tipik seçme menülerinin aksine, menüyü tekrar tıklamadığınız sürece gizlenmeyecektir.

Basit animasyonlu temiz tasarımın gerçekten güzel bir örneği. Ancak, eksik tıkla-gizle özelliğinden hoşlanmıyorsanız, bu bir anlaşma kırıcı olabilir.

10. Karanlık ve Açık Seçimler

Ayrıca saf CSS'yi seviyorsanız ve şık seçimler istiyorsanız, bu çözüme göz atın ve bunlardan birini başlangıç ​​şablonu olarak kullanmayı deneyin.

Her ikisi de arka planlar için CSS gradyanlarına güvenir ve açılır menüleri gradyanın alt rengiyle harmanlar. Bu, herhangi bir JavaScript eklentisi kullanmaz, bu nedenle bunu biraz CSS ve biraz yaratıcı çaba ile başarabilirsiniz.

CSS'nin kendisinin oldukça karmaşık olduğuna dikkat edin, bu nedenle dilde yolunuzu biliyorsanız yardımcı olur. Ancak bir başlangıç ​​noktası olarak, bu bulabileceğiniz en iyi seçeneklerden biridir ve kişiselleştirme için de çok fazla alan bırakır.