css: custom checkbox using :checked pseudo class

gistfile1.html

            <div class="checkbox">
                <label  for="checkbox-1">
                    <input type="checkbox" name="box[1]" id="checkbox-1" checked>
                    Checkbox
                    <div class="checkbox-ui"></div>
                </label>
                
            </div>
            <div class="checkbox">
                <label for="checkbox-2">
                    <input type="checkbox" name="box[2]" id="checkbox-2">
                    Checkbox 2
                    <div class="checkbox-ui"></div>
                </label>
            </div>
            
<style>
   input[type="checkbox"] {
   		opacity: 0;
   		z-index: -1;
   		position: absolute;
   }
   label {
   		position: relative;
   }
   .checkbox input[type="checkbox"]:checked + .checkbox-ui {
   		border: 1px solid #454545;
   		background-color: #454545;   		
   }
   .checkbox-ui {
   		position: absolute;
   		width: 16px;
   		height: 16px;
   		border: 1px solid #337ab7;
   		cursor: pointer;
   		top: 2px;
   		left: 0;
   		border-radius: 2px;
   }
   .checkbox-ui-enabled {
   		border: 1px solid #454545;
   		background-color: #454545;
   }
</style>