[CSS][HTML] Obrazkowy formularz radio Opcje

[-Albinos-]

Witam, mam mały problem gdyż chcę zrobić sobie prosty formularz z polami jednokrotnego wyboru.

3 wiersze z 4 opcjami, i jest tak że conajmniej 1 pole z 4 opcji w każdym wierszu musi być zaznaczone.
Wszytko działa ale teraz zamiast tej ikonki kropki którą zaznaczamy chciałbym aby były powiedzmy obrazki i ten który jest zaznaczony to ma obramowanie powiedzmy 2 piksele jakiegoś koloru.
Czy da się to zrobić w html/css czy w js?
Pozdrawiam

[-Albinos-]

Eh no właśnie z tymi selektorami problem:

Taki formularz jest:

Kod

<input type="hidden" name="wyslane" value="TRUE" />
            
                            
<p><h3>Tekst1</h3>
<label><img src="images/img1.jpg" alt="img1" /> <input type="radio" name="opcja1" value="T" /></label>
<label><img src="images/img1.jpg" alt="img2" /> <input type="radio" name="opcja1" value="K" /></label>
<label><img src="images/img1.jpg" alt="img3" /> <input type="radio" name="opcja1" value="S" /></label>
                <label><img src="images/img1.jpg" alt="img4" /> <input type="radio" name="opcja1" value="P" /></label>
                </p>
                
            
<p><h3>Tekst2</h3>
<label><img src="images/img1.jpg" alt="img1" /> <input type="radio" name="opcja2" value="1" /> </label>
<label><img src="images/img1.jpg" alt="img2" /> <input type="radio" name="opcja2" value="2" /></label>
<label><img src="images/img1.jpg" alt="img3" /> <input type="radio" name="opcja2" value="3" /></label>
<label><img src="images/img1.jpg" alt="img4" /> <input type="radio" name="opcja2" value="4" /> </label>
</p>
                
<p><h3>Tekst3</h3>
<label><img src="images/img1.jpg" alt="img1" /> <input type="radio" name="opcja3" value="A" /> </label>
<label><img src="images/img1.jpg" alt="img2" /> <input type="radio" name="opcja3" value="G" /> </label>
<label><img src="images/img1.jpg" alt="img3" /> <input type="radio" name="opcja3" value="S" /> </label>
<label><img src="images/img1.jpg" alt="img4" /> <input type="radio" name="opcja3" value="N" /> </label>
</p>            
            
<p>Tekst A <textarea name="teksta" cols="80"></textarea></p>
            
<p>Tekst B <textarea name="tekstb" cols="80"></textarea></p>
            
<p>Tekst C <textarea id="tresc" name="tekstc" cols="80" rows="10"></textarea></p>
            
            
<p><input type="submit" value="Wyślij" /></p>
    
</form>

I jakie muszę wpisać selektory w css?

//
Musi być :checked żeby była ramka gdy radio jest zaznaczone.

Ten post edytował Albinos 27.10.2012, 14:17:31