Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS][HTML] Obrazkowy formularz radio
-Albinos-
post
Post #1





Goście
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
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 7)
b4rt3kk
post
Post #2





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

Ostrzeżenie: (0%)
-----

Tutaj masz jak to zrobić w css:

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


--------------------
Jeśli pomogłem, kliknij proszę 'pomógł'. Dzięki.
Go to the top of the page
+Quote Post
-Albinos-
post
Post #3





Goście
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 wink.gif
Go to the top of the page
+Quote Post
b4rt3kk
post
Post #4





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

Ostrzeżenie: (0%)
-----

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

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


Po kliknięciu w obrazek zaznaczy dane radio.


--------------------
Jeśli pomogłem, kliknij proszę 'pomógł'. Dzięki.
Go to the top of the page
+Quote Post
-Albinos-
post
Post #5





Goście
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?
Go to the top of the page
+Quote Post
b4rt3kk
post
Post #6





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

Ostrzeżenie: (0%)
----- 

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


--------------------
Jeśli pomogłem, kliknij proszę 'pomógł'. Dzięki.
Go to the top of the page
+Quote Post
-Albinos-
post
Post #7





Goście
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
Go to the top of the page
+Quote Post
b4rt3kk
post
Post #8





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

Ostrzeżenie: (0%)
-----

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

[HTML] pobierz, plaintext 
  1. <head>
  2. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
  3. <script type="text/javascript">
  4. $(function(){
  5.   $('input[type="radio"]').click(function(){
  6.     $('.obrazek').attr('style', '');
  7.     $(this).parent('label').children('img').attr('style', 'border: 5px solid yellow');
  8.   });
  9. });
  10. </script>
  11. </head>
  12.  
  13. <input type="hidden" name="wyslane" value="TRUE" />
  14.  
  15.  
  16. <p><h3>Tekst1</h3>
  17. <label><img src="images/img1.jpg" alt="img1" class="obrazek" /> <input class="opcja" type="radio" 
  18.  
  19. name="opcja1" value="T" /></label>
  20. <label><img src="images/img1.jpg" alt="img2" class="obrazek" /> <input  class="opcja"type="radio" 
  21.  
  22. name="opcja1" value="K" /></label>
  23. <label><img src="images/img1.jpg" alt="img3" class="obrazek" /> <input  class="opcja"type="radio" 
  24.  
  25. name="opcja1" value="S" /></label>
  26.                 <label><img src="images/img1.jpg" alt="img4" class="obrazek" /> <input class="opcja" 
  27.  
  28. type="radio" name="opcja1" value="P" /></label>
  29.                 </p>
[HTML] pobierz, plaintext


--------------------
Jeśli pomogłem, kliknij proszę 'pomógł'. Dzięki.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 21.08.2025 - 19:34
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn