Looking for a way to change the background color of a label when the corresponding checkbox is checked? Take a look at the code snippet below to see how it can be done:
.viewbutton {
height: 48px;
width: 48px;
background-color: #FFFFFF;
border-radius: 50%;
margin: 0px 4px;
border: 0px;
border: 1px solid #CDCDCD;
cursor: pointer;
background-repeat: no-repeat;
background-position: center;
background-size: 24px;
position: relative;
display: inline-block;
}
#comparechk:checked+#comparebtn,
#editchk:checked+#editbtn,
#multiplechk:checked+#multiplebtn {
background-color: #005EFF;
outline: none;
}<input type="checkbox" id="comparechk" class="chkhidden">
<input type="checkbox" id="editchk" class="chkhidden">
<input type="checkbox" id="multiplechk" class="chkhidden">
<label for="comparechk" id="comparebtn" class="viewbutton"></label>
<label for="editchk" id="editbtn" class="viewbutton"></label>
<label for="multiplechk" id="multiplebtn" class="viewbutton"></label>