checkbox design code example

Example 1: checkbox input in css

//all checkbox
input[type="checkbox"]{
  box-shadow: 0 0 0 3px hotpink;
}

// all checked checkbox
input[type="checkbox"]:checked {
  box-shadow: 0 0 0 3px hotpink;
}

Example 2: 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>