Gyorstipp: CSS3 jelölőnégyzetek és rádiógombok

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

Gondolkoztál már azon, hogyan lehetne JavaScript nélkül stilizálni a jelölőnégyzeteket és a rádiógombokat? Köszönhetően a CSS3-nak, ezt is megteheted! Ezt fogjuk elkészíteni:

Ha valamilyen grafikát szeretnél használni az űrlapod UI elemeihez, vess egy pillantást az Envato Elementsen elérhető UI kits-re. Máskülönben pedig ragadj fel egy csésze kávét és fogj hozzá ehhez a bemutatóhoz!

1. A folyamat megértése

Ajánlott olvasmány: 30 CSS szelektor, amit mindenképp ismerned kell

Azok számára, akik már magabiztosak a CSS képességeikben és csak egy kis noszogtatásra van szükségük a megfelelő irányba, itt az egész bemutató legfontosabb CSS sora:

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

Azok se féljenek semmit, akik úgy érzik, hogy szükségük van további útmutatásra, csak olvassanak tovább!

Rendben, akkor térjünk vissza a témához. Mit is fogunk pontosan csinálni? Nos, a CSS3 aranyos kis :checked pszeudo szelektora révén képesek vagyunk megcélozni egy elemet annak bejelölt (vagy bejelöletlen) állapota alapján. Használhatjuk a + szomszédos szelektort a CSS2.1-ből egy jelölőnégyzetet vagy rádiógombot követő elem közvetlen megcélzásához, ami a mi esetünkben a label.

2. A HTML-ünk felállítása

Most nekifoghatunk a HTML-ünk és CSS fájljaink (vagy ahogy kezelni szeretnéd a stílusaidat) létrehozásához és munkára fogásukhoz. Feltételezem, hogy tudod, hogy kell ezt megtenni, így ebbe most nem megyünk bele.

A gyors haladás érdekében csak egy jelölőnégyzeten fogom demonstrálni ezt a technikát, de a folyamat ugyanez a rádiógomboknál is, és a forrásfájlokba az is bele van véve.

Oké, akkor fogjunk hozzá, igaz? Elkezdjük létrehozni a jelölőnégyzet inputunkat, amit egy label fog követni.

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

Namost, abban az esetben, ha nem sokat tudsz a <label> elemről: az input és a label tageket össze kell kapcsolni annak érdekében, hogy az inputtal interakcióba léphess a labelen keresztül. Ez a for="" használatával és az input ID-jével valósítható meg.

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

Hozzá fogok adni egy <span>-t a label belsejével, ami nagyon egyéni dolognak tűnik, de majd a 3. lépésben minden tisztázódik.

3. Amiért itt vagyunk: CSS

Itt kezdődik a móka. Első dolgunk, ami az egész bemutatónk alapja, hogy elrejtjük a tényleges jelölőnégyzetet.

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

Most hogy ez megvan, stilizálhatjuk a labelt, egész pontosan a span taget a labelen belül. Ezt azért így csinálom, hogy több teret adjak magamnak a jelölőnégyzet pontos helyzetének meghatározásához. Enélkül valószínűleg egy háttérképet kellene használnod közvetlenül a labelen, és annak pozicionálása elég nehézkes lehet.

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

Rendben, ezt most gyorsan elmagyarázom. Először is, vedd észre a hátteret. Van egy kis sprite lapom hozzá, így csak annyit kell tennem, hogy beállítom a háttér helyzetét erre a spanre. Maga a span konkrét szélességű és magasságú minden egyes "sprite" esetén a lapon, ami megkönnyíti az állapotok meghatározását.

Itt van a CSS többi része, az én stilizálásomnak megfelelően. Ez pusztán esztétikai dolog, és konkrétan csak az én ízlésemet tükrözi.

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. Tegyük működővé

Már nincs túl sok munka hátra, így fogjuk össze a dolgokat. Az utolsó dolog, amit meg kell csinálnod, hogy egy olyan állapotot kell adni az elemnek, ahol az input checked, és opcionálisan hover is. Ez elég egyszerű, csak nézd meg!

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

Vegyük észre, hogy mivel egy sprite lapot használtam, csak annyit kell tennem, hogy megváltoztatom a háttér pozícióját. Azt is vegyük észre, hogy csak a label spanját kell stilizálnom arra, hogy mikor lett "bekattintva" egy jelölőnégyzet/rádiógomb, ezt pedig a CSS3 :checked pszeudo szelektorával oldjuk meg.

Gyors megjegyzés a böngészőtámogatásról

A pszeudo szelektorok nagy támogatást kapnak a böngészőktől, de erre is igaz, hogy ahol nem, ott egy tartalék is szépen mutathat:

Can I use data for pseudo selectors — Can I Use információk az általános pszeudo szelektorokról

IE9 on Windows 7 — Tartalék: IE9 Windows 7 alatt

A korai mobil böngészőknél is problémát jelent, hogy a :checked támogatása tisztázatlan. Például az iOS 6 előtti mobil Safari nem támogatja

Konklúzió

Rendben, akkor végeztünk is, igaz? Azért ellenőrizzük le még egyszer. Először a HTML:

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

A tiéd is így néz ki? Ne felejtsd el hozzáadni a <span>-t! Amikor ezt saját magad próbálod megvalósítani, erősen javaslom, hogy próbálj meg egy új vagy másféle módot találni ennek a megvalósítására. Szeretném látni, hogy elő tudsz-e állni valamivel, ami sokkal hatásosabb. Most pedig a CSS-hez:

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

Minden ott van? Tökéletes. Tartsd észben, hogy sok stilizálás konkrétan ahhoz a stílushoz készült, amit a demó fájlokhoz készítettem. Arra bátorítalak, hogy hozd létre a sajátodat, és kísérletezz az elhelyezéssel és bemutatással.

Összefoglalva, a legfontosabb dolog ebben az, amit a CSS legelső sorában írtam legfelül:

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

Ennek használatával rengeteg különféle dolgot hozhatsz létre. A :checked lehetőségei túlmutatnak a jelölőnégyzetek és rádiógombok használatánál az űrlapokon, de ennek kikísérletezését rád hagyom. Néhány dolog, amivel lehet kísérletezni:

2x-es sprite lap hozzáadása a retina képernyők számára
SVG használata egy bittérkép helyett

Remélem, élvezted ezt a rövid cikket és remélem, hogy meg tudtam mutatni neked, amit szerettem volna. Terjeszd ki és javíts rajta, ha van kedved hozzá!