<div class="checkbox-control-border"> <label class="control"> Первый checkbox <input type="checkbox" name="checkbox-2-1" checked="checked"> <div class="control_indicator"></div> </label> <label class="control"> Второй checkbox <input type="checkbox" name="checkbox-2-1"> <div class="control_indicator"></div> </label> <label class="control"> Выключенный <input type="checkbox" name="checkbox-2-2" disabled="disabled"> <div class="control_indicator"></div> </label> <label class="control"> Выключенный и выбранный <input type="checkbox" name="checkbox-2-2" disabled="disabled" checked="checked"> <div class="control_indicator"></div> </label> </div>
.checkbox-control-border { margin-bottom: 40px; font-family: Tahoma; .control { display: block; position: relative; padding-left: 30px; margin-bottom: 15px; padding-top: 3px; cursor: pointer; font-size: 18px; input { position: absolute; z-index: -1; opacity: 0; &:checked { & ~ .control_indicator { border-color: #ccc; &:after { display: block; } } } &:disabled { & ~ .control_indicator { background: transparent; opacity: .6; pointer-events: none; &:after { background: #ccc; } } } } &_indicator { position: absolute; top: 5px; left: 0; height: 20px; width: 20px; border-radius: 0px; background: #fff; border: 1px solid #ccc; &:after { box-sizing: unset; content: ''; position: absolute; display: none; left: 3px; top: 3px; height: 14px; width: 14px; border-radius: 0; background: #ccc; } } &:hover { .control_indicator { &:after { display: block; } } } } }