0
body{
    background-color: #333;
}

label input:checked ~ body{
    background-color: #ffefcd;
}

la intención esta en cambiar el fondo de la página cuando el input esté checked

2
  • CSS es cascada, con esto me refiero que un elemento "por debajo" no puede "subir", es decir, tienes un body -> div -> check. Necesitarás de JS para realizar lo que quieres hacer
    – Zander
    Commented el 31 mar. 2022 a las 13:41
  • 3
    Eso no es posible, el operador ~ funciona para seleccionar elementos hermanos, pero no al contenedor. En todo caso, habrá que esperar a CSS4 para poder usar body:has('label input:checked') que, por ahora, parece funcionar solo con Safari. Mientras tanto, tienes que recurrir a Javascript.
    – Triby
    Commented el 31 mar. 2022 a las 13:42

1 respuesta 1

3

Usarías Javascript

document.getElementById("cambio").addEventListener("change", function() {
      if (document.getElementById("cambio").checked == true) {
        document.documentElement.setAttribute("style", "background-color: green;");
        document.getElementsByTagName("body")[0].setAttribute("style", "color: white;");

      } else {
        document.documentElement.setAttribute("style", "background-color: white;");
        document.getElementsByTagName("body")[0].setAttribute("style", "color: black;");
      }
    });
<input id="cambio" type="checkbox">Cambiar fondo
    <p>Otro texto</p>

Que de hecho es es una respuesta que anteriormente habían respondido aquí en inglés

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.