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

joomla, virtuemart, dizájn, css