Rádió gomb egyedi átalakítása 1. verzió

Nem rég találkoztam egy olyan problémával, ami miatt a Joomla - VirtueMart (custom field) kiválasztó rádiógombt kellett átdizájnolni... tekintve, hogy a kód elég kötött megpróbáltam leginkább CSS-ből megoldani a problémát.

 

Itt egy alap HTML kód pl:

<div class="controls">
 <label for="customProductData_1_100" id="customProductData_1_100-lbl" class="radio"> 
    <input name="customProductData[1][2]" type="radio" value="0" id="customProductData_1_100" />
    Button 1
 </label> 
 <label for="customProductData_1_101" id="customProductData_1_101-lbl" class="radio"> 
   <input name="customProductData[1][2]" type="radio" value="9" id="customProductData_1_101" />
   button 2
 </label>
</div>

A példából jól látszik, hogy az input mező a label tagen belül található. Ennél fogva a gyakran megtalálható megoldás nem műkösik, azaz nem tudok a labelre egyenrangúként hivatkozni...

Ha van lehetőségünk kis mértékben módosítani a kódot (sablon felülírásból), akkor a követkető változtatás szükséges:

<div class="controls">
 <label for="customProductData_1_100" id="customProductData_1_100-lbl" class="radio"> 
    <input name="customProductData[1][2]" type="radio" value="0" id="customProductData_1_100" class="hideradio" />
    <span>Button 1</span>
 </label> 
 <label for="customProductData_1_101" id="customProductData_1_101-lbl" class="radio"> 
   <input name="customProductData[1][2]" type="radio" value="9" id="customProductData_1_101" class="hideradio" />
   <span>button 2</span>
 </label>
</div>

Ezt követően a következő CSS segít, hogy pl. a rádió gomb helyett négyzeteket jelenítsünk meg, és a váltás is működjön:

div.controls input.hideradio {display:none;}
div.controls label span {
    width:24px; 
    height:24px; 
    line-height:24px; 
    border:1px solid #eee; 
    background:transparent; 
    color:#444; 
    display:inline-block; 
    text-align:center;
 }
div.controls input[type="radio"]:checked ~ * {background:#eee;}

(A melléklet példa 24x24 px átlátszó, keretezett négyzeteket tesz ki, ami kattintásra világos szürkére vált.)