CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Allan Jebaraj
Allan Jebaraj

Reputation: 1077

Checkbox and Sibling selector

I'm using labels as a mask for check-boxes and I need to change the background of the label when the corresponding checkbox is checked. Here's what I've done so far:

.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>

Upvotes: 2

Views: 3831

Answers (1)

C3roe
C3roe

Reputation: 96363

+ is the adjacent sibling combinator, so A + B means a B element that directly follows A, no other elements in between.

You want the general sibling combinator, ~

    #comparechk:checked ~ #comparebtn,
    #editchk:checked ~ #editbtn,
    #multiplechk:checked ~ #multiplebtn {
        background-color: #005EFF;
        outline: none;
    }

http://jsfiddle.net/8u031bom/3/

Upvotes: 7

Related Questions