change input type chekbox style code example
Example 1: custom checkbox with image css
#trigger {
display: none;
}
.checker {
background-image: url(assets/checkboxes.png);
background-position: left center;
background-size: auto 100%;
width: 40px;
height: 40px;
background-repeat: no-repeat;
}
#trigger:checked + .checker {
background-position: right center;
}
Example 2: custom checkbox with image css
<div>Check me!</div>
<input id="trigger" type="checkbox">
<label for="trigger" class="checker"></label>
Example 3: checkbox style css
<div>
<label>Checkbox Small</label>
<input type="checkbox" id="checkbox-1-1" class="regular-checkbox" />
<nput type="checkbox" id="checkbox-1-2" class="regular-checkbox" />
<input type="checkbox" id="checkbox-1-3" class="regular-checkbox" />
<input type="checkbox" id="checkbox-1-4" class="regular-checkbox" />
</div>
<div>
<label>Checkbox Big</label>
<input type="checkbox" id="checkbox-2-1" class="regular-checkbox big-checkbox" />
<input type="checkbox" id="checkbox-2-2" class="regular-checkbox big-checkbox" />
<input type="checkbox" id="checkbox-2-3" class="regular-checkbox big-checkbox" />
<input type="checkbox" id="checkbox-2-4" class="regular-checkbox big-checkbox" />
</div>
<div>
<label>Radio Small</label>
<div class="button-holder">
<input type="radio" id="radio-1-1" name="radio-1-set" class="regular-radio" checked />
<input type="radio" id="radio-1-2" name="radio-1-set" class="regular-radio" />
<input type="radio" id="radio-1-3" name="radio-1-set" class="regular-radio" />
<input type="radio" id="radio-1-4" name="radio-1-set" class="regular-radio" />
</div>
</div>
<div>
<label class="radio-1">Radio Big</label>
<div class="button-holder">
<input type="radio" id="radio-2-1" name="radio-2-set" class="regular-radio big-radio" />
<input type="radio" id="radio-2-2" name="radio-2-set" class="regular-radio big-radio" />
<input type="radio" id="radio-2-3" name="radio-2-set" class="regular-radio big-radio" checked />
<input type="radio" id="radio-2-4" name="radio-2-set" class="regular-radio big-radio" />
<input type="radio" id="radio-2-5" name="radio-2-set" class="regular-radio big-radio" />
</div>
</div>