Стилизация чекбокс на чистом CSS в радиокнопку

укуку


укуку

Исполняемый код:

<div> <div> <label class="switch"> <input type="checkbox" onclick="darkLight()" id="checkBox" > <span class="switch-knp"></span> </label> </div> </div> <style> /* переключатель светл. темн. тема */ .switch {position: relative; display: inline-block; width: 60px; height: 34px; align-self: center;} .switch input {opacity: 0; width: 0; height: 0;} .switch-knp {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: 0.4s; transition: 0.4s;} .switch-knp:before {position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: 0.4s; transition: 0.4s;} input:checked + .switch-knp {background-color: #2196f3;} input:checked + .switch-knp:before {-webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px);} .switch-knp {border-radius: 30px;} .switch-knp:before {border-radius: 50%;} </style