Egyre gyakoribb, hogy a grafikusok, webdizájnerek szebbnél-szebb form elemeket gyártanak. Sok esetben, ez nem épül mégsem meg, mert a javascript használata még mindig nehézkes időnként, mivel sok esetben nem elegendő, hogy egy oldal látogatóinak 90%-a használ javascriptet. Mi van a fennmaradó 10%-al. Nos rengeteg olyan online szolgáltatás van, aminél igenis fontos tényező, hogy a potenciális ügyfelek egy részét nem tudjuk megfelelően kiszolgálni. Természetesen az is igaz, hogy pl a niceforms, js alapú form megoldása remek lehetőségeket ad számunkra, ráadásul ha nincs js a böngészőn, a dífolt form elemeket jeleníti meg. Ez szép és jó megoldás persze, csak hát ha megvan a törekvés, egy minden gépen és böngészőn ugyanúgy kinéző formot hozzunk létre, akkor miért is állnánk meg itt.
Egy ideje ráérős időmben azon vagyok, hogy létrehozzak egy alapot képező form.css-t, ami a tökéletes nullázását adná a form elemeknek. A pixel pontosság persze, szinte elérhetetlen, ha figyelembe vesszük az ie, ff, opera input mezőinek erősen eltérő megjelenítését, és a teljesen értelmetlenül eltérő alapértelmezett formázásait minden egyes böngészőnek.
Nándi kollégámat sikerült meghatnom elvetemült szándékommal, és végül egy közös megoldást kísérleteztünk ki, eme nemes feladat ellátására, “pure css” alapokon. Ez még csak egy radio buttonra és checkboxra használható megoldást hozott, amit egyenlőre ie-5-6-7, ff 1.5-2, opera 9-en kívűl máshol nem sikerült tesztelnünk, de ezeken már kielégítő megoldást jelent.
A trükk lényege, hogy a LABEL tagot használjuk fel egy image-replace megoldással karöltve, és kicsit trükkös a transparens gif az új megjelenéshez.
Az alábbi html kódban jól látható, hogy a LABEL tagunkba helyezzük a hozzátartozó INPUT-ot, és egy a kép-kitakarós megoldást (FIR) lehetővé tevő SPAN tagot.
teszt3 checkbox 21×21Az input mezők különös állatfajták, így viszoynlag korlátozott mértékben áll módunkban finomítani rajtuk, ez indokolja a példában szereplő 2 méretet (13×13 és 21×21 pixeles méreteket). Az IE szinte az egyetlen, aminél nincs maximum méret korlátja egy checkboxnak, míg a Mozillák ezt egy emberi méretben rögzítik. Másrészt a mezőt magát, egy szabályos négyzetben képzelték el, és ettől eltérni szinte lehetetlen.Javascript nélkül nem áll módunkban a checkbox pipáját lecserélni, és mivel majdnem minden böngésző más css-style definiciókat alkalmaz az INPUTokra, ezért is jutottunk arra következtetésre, hogy a form elem kinézetét egy transparens gif-fel oldjuk meg.
label#label2 {
position:relative;
display:block;
width:200px;
height:13px;
line-height:13px;
vertical-align:middle;
font-size:10px;
}
label#label2 input.checkbox {
width:13px;
height:13px;
display:inline-block;
margin: 0px;
outline:0px;
border:none;
}
label#label2 span.fedo {
position:absolute;
display:block;
width:13px;
height:13px;
font-size:8px;
top:0px;
left:0px;
background: url(checkbox.gif) no-repeat left top;
}
/* 21x21 */
label#label3 {
position:relative;
display:block;
width:200px;
height:23px;
line-height:15px;
vertical-align:baseline;
font-size:13px;
padding:0px;
}
label#label3 input.checkbox {
width:24px;
height:24px;
display:block;
margin: 0px;
padding:0px;
outline:0px;
border: 0px solid;
}
label#label3 span.fedo {
position:absolute;
display:block;
width:21px;
height:21px;
font-size:8px;
top:1px;
left:1px;
float:left;
background: url(checkbox21.gif) no-repeat left top;
}
A fenti kódból jól kitűnik, egy FIR-es megoldással a LABEL-ben, a checkbox főlé feszítünk egy gif-et. Minthogy mindenki kicsit eltérően jeleníti meg a checkboxot, mindenki kicsit más árnyék-effektekkel, és más pipával, ezért úgy határoztunk, a pipát kivéve kitakarjuk a többit. Ha a transzparens gifet megvizsgáljuk, jól látható, hogy a cél érdekében többször is csaltunk 
checkbox.gif
checkbox21.gif
Az egyik ilyen, hogy a kép közvetlen közepe az, ami áttetsző, mivel a checkbox teljes keretét megpróbáljuk elfedni. A pipa közvetlen környezetét is ki-ki takarjuk még, ez a gif-en a középtájékon elhelyezkedő fehér rész, mivel előfordult olyan böngésző, ami a takarás ellenére, a chechkbox default keretét helyenként megjelenítette még a takarás ellenére is.
No de, a legérdekesebb részek egyike, hogy miért is csempésztük bele a LABEL tagba magát az INPUTot. Sokat vitatható kérdés, vajon hogy lenne tisztább egy input-label használata. Sokakkal beszéltem, akik a dizájnolhatóság kedvéért előszeretettel rakják a LABELbe az inputot magát, én helyzetfüggően szoktam ezt alkalmazni.
A jelen eset hatalmazott fel rá, hogy most is így járjunk el. Ennek leginkább az volt az oka, hogy míg a MOZILLÁk hajlandóak egy teljes mértékben letakart INPUT-nak is átadni a klikk eseményt (szűlő-gyermek viszony következtében), addig ezt az MS szépséges kék E betűje nem hajlandó eljátszani. Így a LABEL FOR van olyan kedves és IE bácsinak is elmondja, hogy “hékás, ide klikkeltek no…..”
- gyakran megoldás lehet rá, hogy 0px helyett a top vagy elf tértéket adjuk meg, illetve, hogy 1px-t állítunk be, így már mindannyian ugyanazt a pontot fogják megjelölni.