Styles don't work when you create the switch?

Make your switch to css . Could use ready-made solutions,but hunting by yourself for practice , all right,but not works a shift of the circle of the checkbox when clicked . The code below

<div class="switcher">
 <input class="switcher_input" type="checkbox" name="switched" id="switcher">
 <label class="switcher_Label" for="switcher">
 <span class="switcher_text">Text</span>

 display: none;
.switcher_input:checked + .switcher_label {
 color: #000;
.switcher_input:checked + .switcher_label:before {
 background-color: #e52727;
.switcher_input:checked + .switcher_label:after {
 transform: translateX(23px);
 display: inline-block;
 font-size: 14px;
 vertical-align: top;
 padding-left: 50px;
 color: #f5f5f5;
 cursor: pointer;
 position: relative;
.switcher_Label:before {
 content: "";
 width: 45px;
 display: block;
 height: 22px;
 background-color: #fff6f6;
 border-radius: 10px;
 position: absolute;
 left: 0;
 top: 0;
 z-index: 1;
.switcher_Label:after {
 display: block;
 content: "";
 width: 20px;
 height: 20px;
 background: #000;
 position: absolute;
 top: 1px;
 left: 1px;
 z-index: 2;
 border-radius: 50%;
.switcher_text {
 line-height: 22px;

June 14th 19 at 18:59
1 answer
June 14th 19 at 19:01
Before you can ask to help - check for themselves. You inadvertently wrote switcher_label is switcher_Label in styles (in the markup You have switcher_Label).

Find more questions by tags CSSHTML