zmiana koloru po zaznaczeniu pola typu radio

pytanie zadane 24 stycznia w PHP przez mn130496 Gaduła (3,640 p.)

Witam

Napisałem skrypt w php testu online. Chciałbym aby w momencie gdy użytkownik zaznaczy jakąś odpowiedz to cała zmieni kolor np na niebieski. Problem w tym , że nie mogę tego zrobić , każdy sposób jaki próbowałem kończył się tym , że nadal nie działało to tak jak bym chciał. Czy ktoś mógłby mi wytłumaczyć jak to zrobić za pomocą css. Poniżej dodaje kod i proszę o pomoc

<?php
    
    require_once('../function.php');

?>


<!doctype html>
<html lang="pl">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>testy</title>
  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
  <style>
    body {
      background: #2F3237;
    }

    header h1 {
      color: #FA6C65;
      padding-top: 50px;
    }
    

    header span {
      color: #d2d3d6;
    }

    header p {
      color: #8E9198;
      font-weight: normal;
    }

    #zegar1 {
      ont-family: 'Open Sans', sans-serif;
      font-weight: 400;
      font-size: 20px;
      color: #D2D3D6;
      letter-spacing: 0.025em;
      word-wrap: break-word;
      margin-top: 15px;
      margin-bottom: 15px;
      text-align: center;
      line-height: 150%;
      min-height: 30px;
    }

    .pytania {
      color: #D2D3D6;
    }

    .tresc {
      font-family: 'Open Sans', sans-serif;
      font-weight: 400;
      letter-spacing: 0.025em;
      font-size: 18px;
      padding: 20px;
      line-height: 150%;
      background-color: #26282E;
      text-align: left;
      margin-bottom: 12px;
      margin-top: 50px;
    }

    .odp {
      font-family: 'Open Sans', sans-serif;
      font-weight: 400;
      letter-spacing: 0.025em;
      font-size: 18px;
      padding: 20px;
      line-height: 150%;
      background-color: #26282E;
      text-align: left;
      margin-bottom: 12px;
      margin-top: 20px;
    }
    .MathJax
    {
      display: inline-block !important;
    }

    input[type=submit] {
      background-color: #FA6C65;
      padding: 5px;
      margin-top: 25px;
      margin-bottom: 25px;
      width: 400px;
      text-align: center;
      font-size: x-large;
      color: white;
      font-weight: bold;
    }
   
  </style>

</head>

<body>
  <header>
    <div class="container text-center">
      <div class="row">
        <div class="col-12 ">
          <h1>Arkusz Maturalny-<span>Test 34 pytań</span> </h1>
        </div>
      </div>
      <div class="row">
        <div class="col-12 ">
          <p>Sprawdź się w dokładnie takim samym trybie, jaki obowiązuje podczas rzeczywistego egzaminu! Na rozwiązanie
            <br>
            trzydziestu czterech pytań otrzymujesz maksymalnie 170 minut Powodzenia

          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12" style="border-bottom:1px solid #FA6C65;border-top:1px solid #FA6C65;" data-aos="fade-up">

          <div id="zegar1">Czas jaki pozostał do zakończenia egzaminu → 48 min 22 sek</div>

        </div>
      </div>
  </header>
  <section class="pytania">
    <div class="container">
      <div class="row ">
        <div class="col-6 text-center offset-3">
            
        <form action="wynik.php?rok=" method="post">
            <?php
                session_start();
                $rows = get_pytania($_GET['rok']);
                
                foreach($rows as $r)
                {
                  echo '<div class = "tresc">'.$r['tresc']. '</div>';
                  if ($r['img'] != NULL) {
                    echo '<div class = "obrazek">'.'<img src="../jpg/'.$r['img'].'">'. '</div>';
                  }
                  
                  echo '<div class="odp">'. '<input type="radio" clase = "odp" name="'.$r['id'].'" value="A">'." A. ".$r['odpA'].'</div>';
                  echo '<div class="odp">'. '<input type="radio" name="'.$r['id'].'" value="B" required>'." B. ".$r['odpB'].'</div>';
                  echo '<div class="odp">'. '<input type="radio" name="'.$r['id'].'" value="C">'." C.  ".$r['odpC'].'</div>';
                  echo '<div class="odp">'. '<input type="radio" name="'.$r['id'].'" value="D">'." D. ".$r['odpD'].'</div>';
                 
              
                }
               
            ?>
            <div class="row">
              <div class="col-md-12" style="border-bottom:1px solid #FA6C65;border-top:1px solid #FA6C65;"
                data-aos="fade-up">

                <div id="zegar1">Czas jaki pozostał do zakończenia egzaminu → 48 min 22 sek</div>

              </div>
            </div>
            <div class="row offset-2">
              <input type="submit" value="Koniec testu. Sprawdz odpowiedzi">
            </div>


          </form>
  
        </div>



      </div>
    </div>
  </section>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
    crossorigin="anonymous"></script>
</body>

</html>

komentarz 28 stycznia przez VBService Ekspert (256,600 p.)
edycja 29 stycznia przez VBService

BTW, Moim zdaniem w tym kodzie

echo '<div class="odp">'. '<input type="radio" clase = "odp" name="'.$r['id'].'" value="A">'." A. ".$r['odpA'].'</div>';
echo '<div class="odp">'. '<input type="radio" name="'.$r['id'].'" value="B" required>'." B. ".$r['odpB'].'</div>';
echo '<div class="odp">'. '<input type="radio" name="'.$r['id'].'" value="C">'." C.  ".$r['odpC'].'</div>';
echo '<div class="odp">'. '<input type="radio" name="'.$r['id'].'" value="D">'." D. ".$r['odpD'].'</div>';

w tym <input> jest zbędny i błędny zapis clase = "odp"

'<input type="radio" clase = "odp" name="'.$r['id'].'" value="A">'

a w tym, zapis required

'<input type="radio" name="'.$r['id'].'" value="B" required>'

czyli np.: ( PHP parsuje zmienne w stringach w "" dodatkowo dla tablic musisz użyć klamr {} )

echo "<div class='odp'><label><input type='radio' name='pytanie_{$r['id']}' value='A'> A. {$r['odpA']}</label></div>"
   . "<div class='odp'><label><input type='radio' name='pytanie_{$r['id']}' value='B'> B. {$r['odpB']}</label></div>"
   . "<div class='odp'><label><input type='radio' name='pytanie_{$r['id']}' value='C'> C. {$r['odpC']}</label></div>"
   . "<div class='odp'><label><input type='radio' name='pytanie_{$r['id']}' value='D'> D. {$r['odpD']}</label></div>";

lub bardziej czytelny

echo "
<div class='odp'>
    <label>
        <input type='radio' name='pytanie_{$r['id']}' value='A'>
        A. {$r['odpA']}
    </label>
</div>

<div class='odp'>
    <label>
        <input type='radio' name='pytanie_{$r['id']}' value='B'>
        B. {$r['odpB']}
    </label>
</div>

<div class='odp'>
    <label>
        <input type='radio' name='pytanie_{$r['id']}' value='C'>
        C. {$r['odpC']}
    </label>
</div>

<div class='odp'>
    <label>
        <input type='radio' name='pytanie_{$r['id']}' value='D'>
        D. {$r['odpD']}
    </label>
</div>
";

1 odpowiedź

odpowiedź 25 stycznia przez pablop76 VIP (123,640 p.)

.odp:has(input[type="radio"]:checked) {
  background: #FA6C65;
  color: #fff;
  border: 2px solid #FA6C65;
  box-shadow: 0 0 8px #fa6c6533;
}

Selektor .odp:has(input[type="radio"]:checked) wybiera każdy element z klasą .odp, który zawiera w sobie input typu radio, który jest zaznaczony (checked).