Select html through input:checked - pure css

Question

Just wanted to know if anyone knew a way I can select and style the html tag directly after looking for :checked in css.

#btnControl:checked ??? html {
    overflow: hidden;
}

Any feedback will be greatly appreciated! : )

Best, Jonathan

Answer 1

You can't select parent using CSS. But you can use class to do this work. Use javascript to add/remove class to element. When checkbox checked, add class to html and when checkbox unchecked, remove class of html.

var checkbox = document.getElementById("checkbox");
var html = document.getElementsByTagName("html")[0];

checkbox.addEventListener("change", function(){ 
    if (checkbox.checked)
        html.classList.add("checked")
    else
        html.classList.remove("checked")
});

html.checked {
    background: orange;
}

<label for="checkbox">Click on checkbox</label>
<input id="checkbox" type="checkbox" />