0
votes

Comment changer la couleur d'arrière-plan du corps avec une case à cocher avec du CSS pur (si c'est possible)

J'ai une case à cocher et je veux changer la couleur d'arrière-plan du corps quand cela est coché, avec la pseudo-classe ": cochée". Y a-t-il un moyen de faire ça? Je serai reconnaissant pour toute réponse;

#night:checked {
    background-color: #242729;
}

      <label>
        <input id = "night" type = "checkbox">
        <span>Night</span>
      </label>

html css

2 commentaires

Lorsque vous dites body, voulez-vous dire la balise body réelle du document HTML ou voulez-vous dire cette balise span dans l'étiquette? Si vous parlez de l'étiquette corporelle, vous aurez besoin de JS. Si vous parlez simplement de la balise span, alors vous pouvez faire input [type = checkbox]: checked ~ span {background-color: # 242729;}

je suggérerais est d'utiliser un script. jquery, et ajoutez un identifiant de fonction au corps et obtenez la valeur de la case à cocher qui changerait sa propriété. stackoverflow.com/questions/2834350/… .

3 Réponses :

1
votes

en utilisant jquery, vous pouvez le faire comme ceci

    $('#night').change(function(){
      let color = $(this).is(':checked') ? 'black' : 'white';
      $('body').css('background-color', color);
    });

Je ne sais pas comment faire en pur css, désolé

1 commentaires

Ok, merci pour la réponse

0
votes

Vous pouvez y parvenir avec du CSS pur comme ça,

label { background-color:#333; color:#FFF; }

input[type="checkbox"]:checked + label {
    background: brown;
}

Avec ce css,

<input type="checkbox" id="cb_1" value="cb_val" name="cb_name">
<label for="cb_1">
     my checkbox text
</label>

Gardez à l'esprit

L'étiquette doit être après la case à cocher, vous devrez donc la styliser davantage pour conserver le même aspect que vous aviez.

Voici une option pour lui donner plus de style pour avoir la même apparence que vous le souhaitiez, Nouveau violon. CECI N'IMPLIQUE PAS le positionnement de quelque chose d'absolu, juste une supercherie.

0 commentaires

-1
votes

Si vous essayez de le faire avec la balise body, ce n'est pas possible avec Pure CSS. Mais vous pouvez si vous créez un sélecteur "corps" et "+" différent. Vous pouvez consulter ce lien pour un exemple

<input id="night" type="checkbox" hidden>
<div class="body">
  <label for="night">Click to Switch Mode</label>
</div>

Bonne chance et bravo!

0 commentaires