Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

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

by
Length:LongLanguages:

Hungarian (Magyar) translation by Szabó Péter (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:

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.

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. 

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.

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.

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.

Our sprite sheet
A sprite lapunk

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.

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!

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:

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:

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:

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á!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.