Loading Lesson...

The main HTML is very simple, having just two key elements input and span.

<label>
	<input type="checkbox" />
	<span class="checkbox"></span>
</label>

In order to create the checkmark it is nothing more than a bottom, and left border colored green. The key here is that it is then rotated 45deg to make it look like a check mark.

input:checked ~ .checkbox {
	transform: rotate(45deg);
	height: 125px;
	width: 50px;
	margin-left: 50px;
	border-color: green;
	border-top-color: transparent;
	border-left-color: transparent;
	border-radius: 0;
}

This JavaScript is not required, it shows the checked status.

const input = Array.from(document.getElementsByTagName('input')).at(0);

const result =   document.getElementById('result');
input.addEventListener('input', () => {
  input.checked ? result.innerHTML = 'Checked: true' : result.innerHTML = 'Checked: false'
})

Below is a fully working example!