1

<!DOCTYPE html>
<html>
    <head>
	<meta charset="UTF-8">
        <title>PERGUNTA: 1</title>
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/style-index.css">
    </head>
    <body>
        <div class="container">
            <fieldset>
            <legend>Pergunta</legend>
                <form>
                    <h2>
                        1. Normalmente, quantos litros de sangue uma pessoa tem? Em média, quantos são retirados numa doação de sangue?
                    </h2>
                    <div class="alternativas">
                        <label id="alt">
                            <input type="radio" name="resposta" value="a">
                            a) Tem entre 2 a 4 litros. São retirados 450 mililitros 
                        </label>
                        <br>
                        <label id="alt">
                            <input type="radio" name="resposta" value="b">
                            b) Tem entre 4 a 6 litros. São retirados 450 mililitros
                        </label>
                        <br>
                        <label id="alt">
                            <input type="radio" name="resposta" value="c">
                            c) Tem 10 litros. São retirados 2 litros
                        </label>
                        <br>
                        <label id="alt">
                            <input type="radio" name="resposta" value="d">
                            d) Tem 7 litros. São retirados 1,5 litros
                        </label>
                        <br>
                        <label id="alt">
                            <input type="radio" name="resposta" value="e">
                            e) Tem 0,5 litros. São retirados 0,5 litros
                        </label>
                        <br>
                    </div>
                    <p id="msg"></p>
                    <button type="submit">Responder</button>
                </form>
            </fieldset>
        </div>
    </body>
</html>

Como fazer com que, se o usuário selecionar uma alternativa (o elemento input radio) o texto da label mude de cor (verde)? Como fazer em CSS?

1
  • O input vai ter alguma validação no banco, ou é apenas um feedback visual?
    – hugocsl
    11/02/2019 às 19:04

2 Respostas 2

3

Primeiro você deve corrigir a sua estrutura, não repetir id nos elementos e vincular a <label> com o atributo for="". Veja o exemplo abaixo

input[type=radio]:checked+label {
  background-color: green;
  color: white;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>PERGUNTA: 1</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style-index.css">
</head>

<body>
  <div class="container">
    <fieldset>
      <legend>Pergunta</legend>
      <form>
        <h2>
          1. Normalmente, quantos litros de sangue uma pessoa tem? Em média, quantos são retirados numa doação de sangue?
        </h2>
        <div class="alternativas">
          <input type="radio" id="alt_a" name="resposta" value="a"  />
          <label for="alt_a">
           a) Tem entre 2 a 4 litros. São retirados 450 mililitros 
          </label>
          <br>
          <input type="radio" name="resposta" value="b" id="alt_b" />
          <label for="alt_b">
          b) Tem entre 4 a 6 litros. São retirados 450 mililitros
          </label>
          <br>
          <input type="radio" name="resposta" value="c" id="alt_c" />
          <label for="alt_c">
          c) Tem 10 litros. São retirados 2 litros
          </label>
          <br>

          <input type="radio" name="resposta" value="d" id="alt_d" />
          <label for="alt_d">
          d) Tem 7 litros. São retirados 1,5 litros
          </label>
          <br>

          <input type="radio" name="resposta" value="e" id="alt_e" />
          <label for="alt_e">
          e) Tem 0,5 litros. São retirados 0,5 litros
          </label>
          <br>

        </div>
        <p id="msg"></p>
        <button type="submit">Responder</button>
      </form>
    </fieldset>
  </div>
</body>

</html>

3
  • Ou então coloca o texto dentro de um <span> e coloca input:checked + span ;), melhor que deixar o texto "largado" sem tag envolta...
    – hugocsl
    11/02/2019 às 19:14
  • @hugocsl <label> não seria de fato o elemento mais indicado para decorar os controles do form? 11/02/2019 às 19:35
  • A não ser pelo fato de que a label com o input dentro não precisa de for pro id. Semanticamente acho que não tem diferença
    – hugocsl
    11/02/2019 às 19:41
0

Sem mexer na estrutura do seu HTML, uma forma é incluir o texto de cada alternativa em um <span></span>, podendo assim utilizar o estilo CSS abaixo:

.alternativas [type=radio]:checked + span{
   color: lime;
}

Ou seja, ao checar o radiobutton, irá alterar a cor do span adjacente. Mas também é preciso corrigir seu HTML removendo todos os id="alt" repetidos (é incorreto repetir id's na mesma página).

Veja:

.alternativas [type=radio]:checked + span{
   color: lime;
}
<div class="container">
   <fieldset>
   <legend>Pergunta</legend>
       <form>
           <h2>
               1. Normalmente, quantos litros de sangue uma pessoa tem? Em média, quantos são retirados numa doação de sangue?
           </h2>
           <div class="alternativas">
               <label>
                   <input type="radio" name="resposta" value="a">
                   <span>a) Tem entre 2 a 4 litros. São retirados 450 mililitros</span>
               </label>
               <br>
               <label>
                   <input type="radio" name="resposta" value="b">
                   <span>b) Tem entre 4 a 6 litros. São retirados 450 mililitros</span>
               </label>
               <br>
               <label>
                   <input type="radio" name="resposta" value="c">
                   <span>c) Tem 10 litros. São retirados 2 litros</span>
               </label>
               <br>
               <label>
                   <input type="radio" name="resposta" value="d">
                   <span>d) Tem 7 litros. São retirados 1,5 litros</span>
               </label>
               <br>
               <label>
                   <input type="radio" name="resposta" value="e">
                   <span>e) Tem 0,5 litros. São retirados 0,5 litros</span>
               </label>
               <br>
           </div>
           <p id="msg"></p>
           <button type="submit">Responder</button>
       </form>
   </fieldset>
</div>

Você deve fazer log-in para responder a esta pergunta.