вид CheckBoxов

В редакторе

вид CheckBoxов

Brain_Script
1340
2019-07-12 15:41:18
<input type="checkbox" id="check-name" class="checkbox"/> <label for="check-name" class="checkbox-label"><span class="off">off</span><span class="on">on</span></label>
.checkbox {position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 20px;} .checkbox[disabled="disabled"] + .checkbox-label::before, .checkbox[disabled] + .checkbox-label::before {cursor: not-allowed;} .checkbox[disabled="disabled"] + .checkbox-label::after, .checkbox[disabled] + .checkbox-label::after {opacity: .4; cursor: not-allowed;} .checkbox[disabled="disabled"] + .checkbox-label span, .checkbox[disabled] + .checkbox-label span {opacity: .4 !important;} .checkbox-label {position: relative; padding: 0 0 0 60px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;} .checkbox-label::before, .checkbox-label::after {content: ''; position: absolute; box-shadow: 0 0 1px 1px rgba(0,0,0,.15);} .checkbox-label::before {top: -4px; left: 0; width: 40px; height: 20px; border-radius: 3px; background: #CDD1DA;} .checkbox-label::after {top: -2px; left: 2px; width: 16px; height: 16px; border-radius: 2px; background: #FFF;} .checkbox:checked + .checkbox-label::before {background: #07f;} .checkbox:checked + .checkbox-label::after {left: 22px;} .checkbox-label span {pointer-events: none; position: absolute; top: -1px; font-size: 12px;} .checkbox-label span.off {left: 22px; color: #333;} .checkbox-label span.on {left: 5px; color: #fff; opacity: 0;} .checkbox:checked + .checkbox-label span.off {opacity: 0;} .checkbox:checked + .checkbox-label span.on {opacity: 1;} .checkbox-label::before, .checkbox-label::after, .checkbox-label span {transition: .2s;}
Войдите для добавления комментария.
Нет комментариев
Яндекс.Метрика Яндекс.Метрика