How to catch input:checked property in css?

Question

css

I really liked the checkbox version made using css styles:
Source
But I have a project on asp.net, and I can't use just input, so I have to use asp:CheckBox.
As a result, the page code turns out like this:

And the css is this code:

.switch {width: 60px;height: 18px;position: relative;}

.switch label {display: block;width: 100%;height: 100%;position: relative;background: #a5a39d;border-radius: 30px;top: 1px;box-shadow:inset 0 3px 8px 1px rgba(0,0,0,0.2),0 1px 0 rgba(255,255,255,0.5);}
.switch label:after {content: "";position: absolute;z-index: -1;top: 0; right: 0; bottom: 0; left: 0;border-radius: inherit;background: #ccc;background: linear-gradient(#f2f2f2, #ababab);box-shadow: 0 0 1px rgba(0,0,0,0.3),0 1px 1px rgba(0,0,0,0.25);}
.switch label:before {content: "";position: absolute;z-index: -1;top: 0; right: 0; bottom: 0; left: 0;border-radius: inherit;background: #eee; background: linear-gradient(#e5e7e6, #eee);box-shadow: 0 1px 0 rgba(255,255,255,0.5);-webkit-filter: blur(1px);filter: blur(1px);}

.switch label i {display: block;height: 100%;width: 40%;position: absolute;left: 0;top: 0;z-index: 2;border-radius: inherit;background: #b2ac9e; background: linear-gradient(#f7f2f6, #b2ac9e);box-shadow:inset 0 1px 0 white,0 0 2px rgba(0,0,0,0.3),0 1px 1px rgba(0,0,0,0.2);}
.switch label i:after {content: "";position: absolute;left: 15%;top: 25%;width: 70%;height: 50%;background: #d2cbc3;background: linear-gradient(#cbc7bc, #d2cbc3);border-radius: inherit;}
.switch label i:before {content: "off";position: absolute;top: 0;right: -110%;margin-top: -1px;color: #666;color: rgba(0,0,0,0.4);font-style: normal;font-weight: bold;font-family: Helvetica, Arial, sans-serif;font-size: 10px;text-transform: uppercase;text-shadow: 0 1px 0 #bcb8ae, 0 -1px 0 #97958e;}
.switch span {height: 60px;width: 18px;}
.switch span input {bottom: 0;cursor: pointer;height: 100%;left: -1px;opacity: 0;position: absolute;right: 0;top: 0;width: 100%;z-index: 100;}

.switch input[type="checkbox"]:checked+label {background: #9abb82;}
.switch input[type="checkbox"]:checked+label i {left: auto;right: 0;}
.switch input[type="checkbox"]:checked+label i:before {content: "on";right: 120%;color: #82a06a;text-shadow: 0 1px 0 #afcb9b, 0 -1px 0 #6b8659;}

As a result, the checkbox event itself is triggered (i.e., changes occur on the page that should occur), but the style does not change, it is in the "off" position, i.e. input[type="checkbox"]:checked this event is not caught and therefore no new styles are set.
Can anyone come across and can tell what's what?
I will be grateful...

Answer 1

Add an event to input:
Then CSS:

.labelChecked{
  background: #9abb82;
}
.labelIChecked{
  left: auto;
  right: 0;
}
.beforeChecked{
  content: "on";
  right: 120%;
  color: #82a06a;
  text-shadow: 0 1px 0 #afcb9b, 0 -1px 0 #6b8659;
}

And the JS itself:

function handleChange(chk) {
  var label = document.getElementsByTagName("label")[0];
  var labelI = document.querySelectorAll('label i')[0];
  var labelBefore = document.querySelectorAll('label i:before')[0];
  if(chk.checked == true){
  	label.classList.add(".labelChecked");
  	labelIChecked.classList.add(".labelIChecked");
  	beforeChecked.classList.add(".beforeChecked");
  }else{
    label.classList.remove(".labelChecked");
  	labelIChecked.classList.remove(".labelIChecked");
  	beforeChecked.classList.remove(".beforeChecked");
  }
}