Changing CSS based on input checked

Question

Apologies in advance because I know this is a silly question. I am using the following CSS code to change the background color of a label when it's associated checkbox is checked:

#project input[id="button1"]:checked + label {background-color:red;}

I want to ALSO change the background color of the entire page when id="button1" is checked. Is that possible? I tried adding to the line and a new line with no success:

input[id="button1"]:checked {background-color:blue;}

Shouldn't that affect the background outside the DIV? I can't figure it out. The finished product should have both the label background color and the page background color connected to the state of the checkbox.

c-smile · Accepted Answer · 2015-04-06 02:37:25Z

1

input[id="button1"]:checked {background-color:blue;}

"Shouldn't that affect the background outside the DIV?" - no, it will affect only that input element.

In general you cannot do that by only CSS means as you will need hypothetical :contains selector:

body:contains(input[id="button1"]:checked) {background-color:blue;}

Unfortunately that :contains has very high computational complexity to be implemented in CSS in general.

answered Apr 6, 2015 at 2:37

c-smile

27.6k8 gold badges66 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

knitevision · Accepted Answer · 2015-04-06 05:00:17Z

1

Via pure CSS events you can only change styles of the elements that are children of the element that toggled the event. Your body is never a children of the checkbox input (unless you are high). So the only option is some JavaScript/jQuery.

Basic simple example

var button = document.getElementById('button1');

button.addEventListener('click', function() {
    document.querySelector('body').classList.toggle('blue');
});

edited Apr 6, 2015 at 5:00

answered Apr 6, 2015 at 2:35

knitevision

3,2136 gold badges33 silver badges44 bronze badges

1 Comment

user3283304 Over a year ago

Very nice! Do you think this could be done without jQuery? Maybe just inline javascript? Or no? (also thanks!)

Collectives™ on Stack Overflow

Changing CSS based on input checked

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related