Learn SvelteKit and Firebase: The Ultimate Guide
Learn how to use SvelteKit and Firebase to build high-performance, scalable web applications.
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!
