Kratki Savjet: Lagani CSS3 Checkbox i Radio Gumbi

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

Jeste li se ikad upitali kako stilizirati kućice za označivanje i radio gumbe, ali bez JavaScripta? Zahvaljujući CSS3 to možete vrlo jednostavno učiniti! Evo što ćemo izraditi:

Ako tražite neke grafike za upotrebu sa UI elementima, pogledajte UI setove dostupne na Envato Elements. U suprotnom, opskrbite se šalicom kave i počnimo sa tutorialom!

1. Razumijevanje Procesa

Preporučeni Tekst: 30 CSS Selektora Koje Morate Upamtiti

Za one koji smatraju da su već dovoljno iskusni u CSS-u i samo žele da ih pogurnemo u pravom smjeru, ovo je najvažnija sintaksa CSS-a u cijelom tutorijalu:

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

Sada, za vas kojima treba malo više usmjeravanja, ne bojte se i nastavite čitati!

Dobro, vraćamo se natrag na temu. Što ćemo točno raditi? Pa, zbog CSSovog malenog :checked pseudo selektora, imamo mogućnost targetirati element baziran na njegovom označenom (ili neoznačenom) statusu. Možemo upotrijebiti + susjednog blizanca selektora iz CSS2.1 da targetiramo element direktno prateći checkbox ili radio, što je u našem slučaju label.

2. Podešavanje HTML-a

Sada počinjemo izradom HTML i CSS datoteka (ili kako god preferirate rješavati stilove) i primiti ćemo se posla. Pretpostaviti ću da znate kako to učiniti, pa ne moramo ulaziti u detalje.

Kako bih vas usmjerio, ovu tehniku ću demonstrirati samo na checkbox-u, ali proces za radio gumbe je identičan, i uključen u izvornu datoteku.

Ok, možemo početi, zar ne? Prvo počinjemo izradom "checkbox" input-a, praćenim label-om.

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

Sada, samo u slučaju ako ne znate mnogo o < label > elementu, morate spojiti input i label kako biste omogućili interakciju sa input-om kroz label. To se radi koristeći for="" i ID input-a.

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

Također ću dodati <span> unutar label-a, koji je zapravo više moja osobni izbor, ali sve će vam postati jasno u 3. koraku.

3. Zbog Čega Smo Ovdje: CSS

Ovdje postaje zabavno. Prva stvar koju ćemo sada učiniti, a baza je ovog tutorijala, jest sljedeće: sakriti ćemo "checkbox".

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

Sada možemo stilizirati label, ali preciznije, span unutar label-a. Radim to na ovaj način kako bih si omogućio više kontrole nad točnom pozicijom checkbox-a. Bez toga biste vjerojatno koristili sliku pozadine izravno u label-u, i pozicioniranje bi bilo mnogo kompliciranije.

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;
}

Ok, dozvolite da vam objasnim na brzinu. Prvo, obratite pozornost na pozadinu. Za njih imam maleni sprite sheet, stoga je sve što trebam učiniti, podesiti poziciju pozadine na ovom span-u. Span je sam po sebi točna širina i visina svakog "sprite-a" u sheet-u, što olakšava definiranje svakog stanja.

Ovdje je ostatak CSS-a specifičan za moj "styling". To je čisto estetski i specifično za moj ukus ili ovaj dizajn.

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

Nije nam ostalo još mnogo posla, pa hajdemo dovršiti. Posljednja stvar koju ćete trebati jest dodati stanje za element kada je input označen, i opcionalno također na hover-u. Ovo je prilično jednostavno, samo pogledajte!

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;
}

Primjećujete li da, zbog toga što sam koristio sprite sheet, sve što trebam učiniti jest promijeniti poziciju pozadine. A jeste li primiejtili također, da je sve što sam morao učiniti da stiliziram label-ov span za kada "označite" chekbox/radio gumb, bilo upotrijebiti CSS3 :checked pseudo selektor.

Kratki Savjet o Podršci Browser-a

Pseudo selektori imaju odličnu podršku u svim pretraživačima, ali primjenjuju se uobičajena upozorenja, i rezerva je prilično dobra:

Can I use data for pseudo selectors — Mogu li Koristiti data podatke za pseudo selektore

IE9 on Windows 7 — Rezerva: IE9 na Windows 7

Rane mobilne verzije također su problem - podrška za :checked je nejasna. Npr. mobilni Safari prije iOS6 ga ne podržava.

Zaključak

U redu, gotovi smo, zar ne? Pa, provjerimo još jednom. Prvo HTML:

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

Izgleda li kod vas jednako? Ne zaboravite dodati <span>! Kada sami eksperimentirate, toplo preporučam da pronađete nove ili različite načine na koje ćete napraviti ovaj dio. Volio bih vidjeti što ste smislili za bolju učinkovitost. A sada 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;
}

Sve je ovdje? Savršeno. Imajte na umu da je mnogo ovog stiliziranja specifično stilu koji sam izradio za demo datoteke. Potičem vas da izradite vlastiti, i eksperimentirate sa smještanjem i prezentacijom.

U zaključku, najvažnija stvar koju biste iz ovog mogli izdvojiti je prva linija CSS-a koju sam napisao na vrhu:

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

Koristeći je, možete napraviti cijeli niz različitih stvari. Mogućnosti sa :checked protežu se izvan checkbox-ova i radija za upotrebu u formama, ali to eksperimentiranje ću prepustiti vama. Neke stvari sa kojima možete ekperimentirati:

Dodajte 2 x Spritesheet za retina ekrane
Upotrijebite SVG umjesto bitmap-e

Nadam se da ste uživali u ovom kratkom članku i da ćete se poslužiti ponuđenim i unaprijediti navedeno!