Vivek Maskara Vivek Maskara - 2 months ago 9
CSS Question

How to change the CSS of the active toggle button using pseudo CSS transitions

I have multiple toggle buttons on my web page. I am using

checkbox
input control with some CSS to get a material toggle button design. When I change the state of any of the toggle buttons, the CSS effects are reflected on the first toggle. How can i apply the effect on just the active toggle.

<div>
<div class="material-toggle">
<input type="checkbox" id="toggle" name="toggle" checked=true class="switch" />
<label for="toggle" class=""></label>
</div>
<div class="material-toggle">
<input type="checkbox" id="toggle" name="toggle" checked=true class="switch" />
<label for="toggle" class=""></label>
</div>
</div>


Here's the CSS I am using.

.material-toggle {
height: 22px;
width: 40px;
margin: 12px;
}

.material-toggle input:empty {
margin-left: -9999px;
}

.material-toggle input:empty ~ label {
position: relative;
float: left;
width: 150px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.material-toggle input:empty ~ label:before,
.material-toggle input:empty ~ label:after {
position: absolute;
display: block;
content: ' ';
-webkit-transition: all 250ms cubic-bezier(.4,0,.2,1);
transition: all 250ms cubic-bezier(.4,0,.2,1);
}

.material-toggle input:empty ~ label:before {
top: 3px;
left: 0px;
width: 32px;
height: 13px;
border-radius: 12px;
background-color: #bdbdbd;
}

input.switch:empty ~ label:after {
top: -1px;
left: -9px;
width: 1.4em;
height: 8px;
bottom: 0.1em;
margin-left: 0.1em;
background-color: #fff;
border-radius: 50%;
width: 17px;
height: 17px;
border-radius: 50%;
border: solid 2px;
border-color: #fff;
box-shadow: 0 3px 4px 0 rgba(0,0,0,.14),0 3px 3px -2px rgba(0,0,0,.2),0 1px 8px 0 rgba(0,0,0,.12);
}

.material-toggle input:checked ~ label:before {
background-color: #1e88e5;
}

.material-toggle input:checked ~ label:after {
left: 15px;
background-color: #1565c0;
border-color: #1565c0;
}


I am attaching a codepen for the same.

Answer

if you want to have multiple toggle buttons, you need to use IDs, but you have the same IDs in both toggles, which can't happen because IDs are unique, so change the ID and the label for to target those IDs.

.material-toggle {
  height: 22px;
  width: 40px;
  margin: 12px;
}
.material-toggle input:empty {
  margin-left: -9999px;
}
.material-toggle input:empty ~ label {
  position: relative;
  float: left;
  width: 150px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.material-toggle input:empty ~ label:before,
.material-toggle input:empty ~ label:after {
  position: absolute;
  display: block;
  content: ' ';
  -webkit-transition: all 250ms cubic-bezier(.4, 0, .2, 1);
  transition: all 250ms cubic-bezier(.4, 0, .2, 1);
}
.material-toggle input:empty ~ label:before {
  top: 3px;
  left: 0px;
  width: 32px;
  height: 13px;
  border-radius: 12px;
  background-color: #bdbdbd;
}
input.switch:empty ~ label:after {
  top: -1px;
  left: -9px;
  width: 1.4em;
  height: 8px;
  bottom: 0.1em;
  margin-left: 0.1em;
  background-color: #fff;
  border-radius: 50%;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: solid 2px;
  border-color: #fff;
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 8px 0 rgba(0, 0, 0, .12);
}
.material-toggle input:checked ~ label:before {
  background-color: #1e88e5;
}
.material-toggle input:checked ~ label:after {
  left: 15px;
  background-color: #1565c0;
  border-color: #1565c0;
}
<div>
  <div class="material-toggle">
    <input type="checkbox" id="toggle" name="toggle" checked=true class="switch" />
    <label for="toggle" class=""></label>
  </div>
  <div class="material-toggle">
    <input type="checkbox" id="toggle2" name="toggle" checked=true class="switch" />
    <label for="toggle2" class=""></label>
  </div>
</div>