Hızlı İpucu: Kolay CSS3 Onay Kutuları ve Seçenek Düğmeleri

() translation by (you can also view the original English article)

Hiç onay kutularını ve seçenek düğmelerini JavaScript olmadan nasıl biçimlendirebileceğinizi merak ettiniz mi? CSS3 sayesinde yapabilirsiniz! İşte yapacağımız:

Form UI öğelerinizle birlikte kullanılacak bazı grafikler arıyorsanız, Envato Elements'tan edinilebilen UI kitlerine göz atın. Aksi takdirde, bir fincan kahve alın ve bu derse başlayın!

1. Süreci Anlamak

Önerilen Kaynaklar: Ezberlemeniz Gereken 30 CSS Seçicisi

Zaten mevcut CSS yeteneklerinizden eminseniz ve yalnızca doğru yönde hareket etmek isteyorsanız için tüm dersteki en önemli CSS satırı şu şekildedir:

1	input[type="checkbox"]:checked + label {
2
3	}

Şimdi, daha fazla yöne ihtiyacı olduğunu düşünenlerdenseniz, korkmayın, devam edin!

Pekala, şimdi konuya geri dönelim. Tam olarak ne yapıyor olacağız? CSS3'in ufak ve yararlı :checked seçicisini kullanarak bir öğeyi seçilmiş (veya seçilmemiş) durumuna göre hedefleyebiliyoruz. Ardından, CSS2.1'deki + bitişik kardeş seçiciyi kullanarak onay kutusu veya seçenek düğmesinin hemen ardından gelen öğeyi hedeflemek için kullanabiliriz; bu durumda label.

2. HTML'yi ayarlama

Şimdi, HTML ve CSS dosyalarımızı oluşturarak (veya siz stillerinizi nasıl düzenliyorsanız) çalışmaya başlayabiliriz. Daha fazla detaya girmemek için bunu nasıl yapacağınızı bildiğinizi varsayıyorum.

Sizi yolunuza koymak için bu tekniği yalnızca bir onay kutusuyla göstereceğim ancak seçenek düğmeleri içinde işlem aynıdır ve kaynak kodunda gelmektedir.

Tamam, o halde başlayalım o zaman, tamam mı? Önce onay kutusu girişini ardından bir label oluşturarak işe başlıyoruz.

1	<input type="checkbox" />
2	<label>Styled Check Box</label>

Şimdi, eğer <label> öğesi hakkında pek fazla birşey bilmiyorsanız, etiketi kullanarak girişle etkileşimde bulunabilmeniz için girişi ve etiketi bağlamanız gerekir. Bunu giriş'in ID'si ve for="" kullanarak yapabilirsiniz.

1	<input type="checkbox" id="c1" name="cc" />
2	<label for="c1">Check Box 1</label>

Ayrıca etiketin içinde, daha çok kişisel bir tercih olarak <span> ekleyeceğim, ancak adım 3'te daha fazla netlik kazanacaktır.

3. Ne İçin Buradayız: CSS

Eğlence burada başlıyor. İlk yapacağımız şey, ki bu dersin temel amacı bu, onay kutusunu gizlemektir.

1	input[type="checkbox"] {
2	display:none;
3	}

Bunu hallettiğimize göre simdi label'ı, daha spesifik olursak label içindeki span'ı biçimlendirebiliriz. Bunu yapmamım asıl sebebi onay kutusunun tam konumu üzerinde daha fazla kontrol sahibi olabilmem. Bu olmadan, muhtemelen label'da bir arka plan görüntüsü kullanıyor olacakdınız ve konumlandırma zorlaşabilirdi.

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    background:url(check_radio_sheet.png) left top no-repeat;
}

Pekâlâ, bunu hızlı bir şekilde açıklayayım. Öncelikle, arka plana dikkat edin. Bunlar için küçük bir sprite sayfam var, bu yüzden tek yapmam gereken bu span'da arka plan konumunu ayarlamak. Span'ın kendisi, sayfadaki "sprite" ların genişlik ve yüksekliği ile aynı böyle her durumu tanımlamayı kolaylaştırır.

İşte benim zevkime göre CSS'nin geri kalanı. Bu sadece estetik ve benim zevkim için ya da bu tasarıma özgüdür.

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}

4. Çalışmasını Sağlamak

Çok fazla yapacak iş kalmadı, bunu tamamlayalım. Yapmanız gereken en son şey, kutu aktif edildiğinde ve kullanıcı ögenin üzerinden fareyi geçirdiğindeki(hover) durumları belirlemek. Bu oldukça basit, sadece bir göz atın!

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

Bir sprite sayfası kullandığım için tek yapmam gereken arka plan konumunu değiştirmek. Bir diğer noktada onay kutusunu/seçenek düğmelerini aktif ettiğinizde label'ın span'ını biçimlendirmek için tek yapmanız gereken CSS3'ün :checked takma seçicisini kullanmak.

Tarayıcı Desteği Hakkında Çabuk Bilgi

Takma seçiciler tüm tarayıcılarda büyük bir oranda desteklenir taşır ancak bazı uyarılar hala geçerlidir ve eğer desteklenmiyorsada yedek yöntem oldukça iyidir.

Can I use data for pseudo selectors — Genel takma seçiciler için data(veri) kullanabilir miyim?

IE9 on Windows 7 — Yedek Yöntem: Windows 7'de IE9

İlk versiyon mobil tarayıcılar da biraz problemli olabilir, :checked'in desteklenip desteklenmediği belirsizdir. Örneğin iOS 6 öncesi Mobil Safari desteklememektedir.

Sonuç

Pekâlâ, işimiz bitti değil mi? Birkez daha kontrol edelim. Önce HTML:

1	<input type="checkbox" id="c1" name="cc" />
2	<label for="c1"><span></span>Check Box 1</label>

Sizinkide aynımı? Span'ı eklemeyi unutmayın! Bunu kendi başınıza denediğinizde, bu bölümü yapmanın yeni veya farklı yollarını bulmanızı öneririm. Daha verimli hale getirmek için ne yaptığınızı görmek isterim. Şimdi CSS:

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

Her şey yerindemi? Mükemmel. Bu biçimlendirmenin çoğunun, demo dosyalar için oluşturduğum stile özgü olduğunu unutmayın.

Sonuç olarak, bundan kazanabileceğiniz en önemli şey, en üstte yazdığım CSS'nin ilk satırıdır:

1	input[type="checkbox"]:checked + label {
2
3	}

Bunu kullanarak, farklı farklı şeyler yaratabilirsiniz. :checked ile yapabilecekleriniz onay kutuları ve seçenek düğmelerinden çok daha öteye gider ancak bunları denemeyi size bırakıyorum. Deneyebileceğiniz bazı şeyler:

Retina ekranlar için 2x büyük sprite sayfası ekleyin.
Bitmap yerine SVG kullanın

Umarım bu kısa yazıdan zevk almışsınızdır ve umarım burada gördüğünüz şeyleri alır ve dahada geliştirirsiniz!