How to change the color of an element?

Asked

Viewed 1,289 times

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>

How to do that if the user selects an alternative (the radio input element) the label text changes color (green)? How to do in CSS?

html css html5 css3

  • Will the input get some validation in the database, or is it just a visual feedback?

2 answers

3

First you must fix your structure, do not repeat id on the elements and link to <label> with the attribute for="". See the example below

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>

  • Or put the text inside a <span> and puts input:checked + span ;), better than leaving the text "dropped" without tag wrapped...

  • @hugocsl <label> would not in fact be the most suitable element to decorate the form controls?

  • Except for the fact that the label with the input inside does not need to be pro id. Semantically I think there is no difference

0

Without tampering with your HTML structure, one way is to include the text of each alternative in one <span></span>, can thus use the CSS style below:

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

That is, when checking the radiobutton, will change the color of span adjacent. But you also need to fix your HTML by removing all id="alt" repeated (it is incorrect to repeat id’s on the same page).

Behold:

.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>

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.