Forum PHP.pl > [CSS][HTML] Obrazkowy formularz radio

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS][HTML] Obrazkowy formularz radio

Albinos

27.10.2012, 11:45:41

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

b4rt3kk

27.10.2012, 12:00:20

Tutaj masz jak to zrobić w css:

http://www.wufoo.com/2011/06/13/custom-rad...and-checkboxes/

Albinos

27.10.2012, 12:55:19

Dzięki, ale chodzi o to że mam np po 4 produkty w 3 wierszach i kiedy klikam w obrazek produktu to go wybiera.
Tak jak na obrazku tylko bez kropek i jak wybieram jeden to ma border np taki jak namalowałem żółty

b4rt3kk

27.10.2012, 13:36:54

W takim razie musisz obrazek opakować w label danego radio.

[HTML] pobierz, plaintext 
<label><img src="jakis_obrazek.jpg"/><input type="radio"/></label>
[HTML] pobierz, plaintext

Po kliknięciu w obrazek zaznaczy dane radio.

Albinos

27.10.2012, 13:45:25

Ok i dodałem sobie w scc dla label img border ale np hover działa, active też ale jak zrobić żeby border miał ten zaznaczony?

b4rt3kk

27.10.2012, 13:56:23

[HTML] pobierz, plaintext 
.klasaRadio:checked + .klasaObrazka {
  border: 5px solid yellow;
}
[HTML] pobierz, plaintext

Albinos

27.10.2012, 14:02:41

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.

b4rt3kk

27.10.2012, 22:06:59

No nie wiem, spróbuj czegoś w tym rodzaju może. Wspomogłem się jQuery.

[HTML] pobierz, plaintext 
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(function(){
  $('input[type="radio"]').click(function(){
    $('.obrazek').attr('style', '');
    $(this).parent('label').children('img').attr('style', 'border: 5px solid yellow');
  });
});
</script>
</head>
 
<input type="hidden" name="wyslane" value="TRUE" />
 
 
<p><h3>Tekst1</h3>
<label><img src="images/img1.jpg" alt="img1" class="obrazek" /> <input class="opcja" type="radio" 
 
name="opcja1" value="T" /></label>
<label><img src="images/img1.jpg" alt="img2" class="obrazek" /> <input  class="opcja"type="radio" 
 
name="opcja1" value="K" /></label>
<label><img src="images/img1.jpg" alt="img3" class="obrazek" /> <input  class="opcja"type="radio" 
 
name="opcja1" value="S" /></label>
                <label><img src="images/img1.jpg" alt="img4" class="obrazek" /> <input class="opcja" 
 
type="radio" name="opcja1" value="P" /></label>
                </p>
[HTML] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.