Checkbox and radio buttons (CSS only/cross-browser)

Html

<!-- Custom checkboxes -->
<form>
	<div class="input-element">
		<input type="checkbox" name="checkbox" class="input-element__checkbox" id="checkbox" />
		<label for="checkbox" class="input-element__label">Checkbox 1</label>
	</div>
	<div class="input-element">
		<input type="checkbox" name="checkbox" class="input-element__checkbox" id="checkbox2" />
		<label for="checkbox2" class="input-element__label">Checkbox 2</label>
	</div>
	<div class="input-element">
		<input type="checkbox" name="checkbox" class="input-element__checkbox" id="checkbox-disabled" disabled />
		<label for="checkbox-disabled" class="input-element__label">Checkbox disabled</label>
	</div>
</form>
<!-- Custom radio buttons -->
<form>
	<div class="input-element">
		<input type="radio" name="radio"  class="input-element__radio" id="radio" />
		<label for="radio" class="input-element__label">radio 1</label>
	</div>
	<div class="input-element">
		<input type="radio" name="radio" class="input-element__radio" id="radio2" />
		<label for="radio2" class="input-element__label">radio 2</label>
	</div>
	<div class="input-element">
		<input type="radio" class="input-element__radio" name="radio" id="radio-disabled" disabled />
		<label for="radio-disabled" class="input-element__label">radio disabled</label>
	</div>
</form>

Scss

 
		
// local vars
$input-element-size: 2rem;
$input-element-size--medium: 2.6rem;
// shared styling
.input-element {
	margin-bottom: 2rem;
	position: relative;
	// label
	&__label {
		font-size: 1.4rem;
		cursor: pointer;
		padding-left: $input-element-size + 1rem;
	}
}
// form elements checkbox/radio
.input-element__checkbox, .input-element__radio {
	position: absolute;
	width: $input-element-size;
	height: $input-element-size;
	opacity: 0;

	& + .input-element__label {
		&:hover:after {
			border: 2px solid $color-blue-tory;
		}

		&:after, &:before {
			content: '';
			position: absolute;
			transition: $transition;
		}

		&:after {
			top: 0;
			left: 0;
			width: $input-element-size;
			height: $input-element-size;
			border: 2px solid $color-gray-wild-sand;
		}

		&:before {
			background-image: url('~@/assets/images/icons/check.svg');
			background-size: 100% 100%;
			width: 1rem;
			height: 1.2rem;
			top: 0.4rem;
			left: 0.5rem;
			opacity: 0;
			transform: scale(0);
			z-index: 1;
		}
	}
	// input functionality
	&:checked + .input-element__label {
		&:after {
			border: 2px solid $color-blue-tory;
			background-color: $color-blue-tory;
		}

		&:before {
			transform: scale(1);
			opacity: 1;
		}
	}
	// disabled input
	&:disabled {
		pointer-events: none;
	}

	&:disabled + .input-element__label {
		opacity: 0.5;
		cursor: not-allowed;

		&:hover:after {
			border: 2px solid $color-gray-wild-sand;
		}
	}
}
// form elements radio styling
.input-element__radio {
	// psuedo elements
	& + .input-element__label {
		&:after {
			border-radius: 50%;
		}

		&:before {
			content: '';
			background-image: none;
			background-color: $color-blue-tory;
			border-radius: 50%;
			left: 0.4rem;
			width: 1.2rem;
			height: 1.2rem;
		}
	}
	// input functionality
	&:checked + .input-element__label {
		&:after {
			background-color: transparent;
		}
	}
}
// form elements checkbox/radio modifiers
.input-element--dark .input-element__checkbox, .input-element--dark .input-element__radio {
	// psuedo elements
	& + .input-element__label:after {
		border: 2px solid $color-gray-woodsmoke;
	}
	// input functionality
	&:checked + .input-element__label:after {
		border: 2px solid $color-blue-tory;
	}
}

@include viewport-medium {
	.input-element {
		margin-bottom: 2.5rem;
		// label
		&__label {
			font-size: 2rem;
			padding-left: $input-element-size + 1.8rem;
		}
	}

	.input-element__checkbox, .input-element__radio {
		width: $input-element-size--medium;
		height: $input-element-size--medium;
		// psuedo elements
		& + .input-element__label:after {
			width: $input-element-size--medium;
			height: $input-element-size--medium;
		}

		& + .input-element__label:before {
			width: 1.5rem;
			height: 1.8rem;
			top: 0.35rem;
			left: 0.58rem;
		}
	}
	// radio buttons
	.input-element__radio + .input-element__label:before {
		top: 0.5rem;
		height: 1.6rem;
		width: 1.6rem;
		left: 0.5rem;
	}

	.input-element__radio + .input-element__label:checked + .input-element__label {
		&:after {
			background-color: transparent;
		}
	}
}