Change the background of a label when acting as checkbox - html

Question

I have labels with images nested inside that is acting as a checkbox. What I can't figure out is how to change the background behind the image when that specific checkbox is selected (label clicked).
It appears as if one of the checkboxes is getting the background to show, but not both and the height element is not working.
Does anyone see what I am doing wrong?
.notificationImgs {
width: 70px;
height: auto;
margin: 0 20px;
cursor: pointer;
}
.notifCheck {
display: none;
}
.notifCheck:checked + label {
background: #CCC;
}
.notifCheck:checked .notificationImgs {
background-color: #CCC;
width: 100%;
height: 70px;
}
<label for="checkText">
<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Text Notifications" class="notificationImgs">
</label>
<input type="checkbox" name="checkText" class="notifCheck" id="checkText" value="text">
<label for="checkEmail">
<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Email Notifications" class="notificationImgs">
</label>

Answer 1

Its not adding background on correct label because of the ordering of input and label. Put related input (which is hidden checkbox) before the related label. So .notifCheck:checked + label can find the correct label. Also you can add display:inline-block to all label style. So it will resolve the height issue.
See the Snippet below:
.notificationImgs {
width: 70px;
height: auto;
margin: 0 20px;
cursor: pointer;
}
.notifCheck {
display: none;
}
label{
display:inline-block;
padding:10px;
}
.notifCheck:checked + label {
background: #CCC;
}
.notifCheck:checked .notificationImgs {
background-color: #CCC;
width: 100%;
height: 70px;
}
<input type="checkbox" name="checkText" class="notifCheck" id="checkText" value="text">
<label for="checkText">
<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Text Notifications" class="notificationImgs">
</label>
<input type="checkbox" name="checkEmail" class="notifCheck" id="checkEmail" value="text">
<label for="checkEmail">
<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Email Notifications" class="notificationImgs">
</label>

Answer 2

Here's the altered HTML/code for you. You were missing checkbox and your CSS is + selector which is looking for checked + label so for first checkbox it was targeting second label.
.notificationImgs {
width: 70px;
height: 70px;
margin: 0 20px;
cursor: pointer;
}
.notifCheck {
display: none;
}
.notifCheck:checked+label {
background: #CCC;
}
.notifCheck:checked .notificationImgs {
background-color: #CCC;
width: 100%;
height: 70px;
}
label{
display:inline-block;
}
<input type="checkbox" name="checkText" class="notifCheck" id="checkText" value="text">
<label for="checkText">
<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Text Notifications" class="notificationImgs"/>
</label>
<input type="checkbox" name="checkText" class="notifCheck" id="checkEmail" value="text">
<label for="checkEmail">
<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Email Notifications" class="notificationImgs"/>
</label>

Answer 3

Label should come after checkbox in your case.
label{
display:inline-block;
padding:10px;
background: #eee;
}
.notificationImgs {
width: 70px;
height: auto;
margin: 0 20px;
cursor: pointer;
}
.notifCheck {
display: none;
}
.notifCheck:checked + label {
background: #aaa;
}
.notifCheck:checked .notificationImgs {
background-color: #aaa;
width: 100%;
height: 70px;
}
<input type="checkbox" name="checkText" class="notifCheck" id="checkText" value="text">
<label for="checkText">
<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Text Notifications" class="notificationImgs">
</label>
<input type="checkbox" name="checkEmail" class="notifCheck" id="checkEmail" value="text">
<label for="checkEmail">
<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Email Notifications" class="notificationImgs">
</label>

Answer 4

In your example code, you only have one checkbox input present. The 2nd label indicates you most likely meant to include a 2nd input checkbox with the id of #checkEmail.
The space (descendant selector) only selects all elements that are 'descendants of a specified element.
So, .notifCheck:checked .notificationImgs does not compute because notificationImgs is not a descendant of notifCheck.
The '+' (adjacent sibling selector) only selects elements that are are adjacent siblings.
So, notifCheck:checked + label is only selecting the 2nd label element, as this element immediately follows the .notifCheck element.