Good all the time! Tell me, please, did I do everything right? In all browsers this will work right? And also on phones and tablets will work correctly? Thank you
.wrp .checkbox { vertical-align: top; width: 17px; height: 17px; margin: 0 3px 0 0; } .wrp .checkbox+label { cursor: pointer; } .wrp .checkbox:not(checked) { position: absolute; opacity: 0; } .wrp .checkbox:not(checked)+label { position: relative; padding: 0 0 0 60px; } .wrp .checkbox:not(checked)+label:before { content: ''; position: absolute; top: -4px; left: 0; width: 50px; height: 26px; border-radius: 13px; background: #CDD1DA; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .2); } .wrp .checkbox:not(checked)+label:after { content: ''; position: absolute; top: -2px; left: 2px; width: 22px; height: 22px; border-radius: 10px; background: #FFF; box-shadow: 0 2px 5px rgba(0, 0, 0, .3); transition: all .2s; } .wrp .checkbox:checked+label:before { background: #9FD468; } .wrp .checkbox:checked+label:after { left: 26px; } .wrp .checkbox:focus+label:before { box-shadow: 0 0 0 3px rgba(255, 255, 0, .5); } .wrp .radio { vertical-align: top; width: 17px; height: 17px; margin: 0 3px 0 0; } .wrp .radio+label { cursor: pointer; } .wrp .radio:not(checked) { position: absolute; opacity: 0; } .wrp .radio:not(checked)+label { position: relative; padding: 0 0 0 35px; } .wrp .radio:not(checked)+label:before { content: ''; position: absolute; top: -3px; left: 0; width: 22px; height: 22px; border: 1px solid #CDD1DA; border-radius: 50%; background: #FFF; } .wrp .radio:not(checked)+label:after { content: ''; position: absolute; top: 1px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: #9FD468; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5); opacity: 0; transition: all .2s; } .wrp .radio:checked+label:after { opacity: 1; } .wrp .radio:focus+label:before { box-shadow: 0 0 0 3px rgba(255, 255, 0, .5); } .wrp input[type='reset'] { padding: 12px 15px; border: none; border-radius: 5px; background: #CDD1DA; color: #FFF; cursor: pointer; font-size: 15px; } .wrp input[type='reset']:active { background: #BDC0CC; } .wrp input[type='reset']:focus { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 0, .5); } <div class="wrp"> <input type="checkbox" class="checkbox" id="checkbox-1"> <label for="checkbox-1">Мой выбор</label> <br><br> <input type="checkbox" class="checkbox" id="checkbox-2"> <label for="checkbox-2">Мой выбор</label> <br><br><br><br> <input type="radio" class="radio" id="radio-1" name="radio"> <label for="radio-1">Мой выбор</label> <br><br> <input type="radio" class="radio" id="radio-2" name="radio"> <label for="radio-2">Мой выбор</label> </div> 
.radio:not(checked)- does not make sense, unless of course "checked" is not a tag (which is unlikely), it will always work. Logically it should be.radio:not(:checked), but otherwise it seems to be nothing illegal. - MedvedevDev:notthere is not really any sense at all in principle. It just works out clearly not as you expect, it just works and that's all, so this condition can be omitted altogether. - MedvedevDev