HTML: Custom Checkbox

Most designs use interactive elements that differ from the default ones in the browser. Such elements are buttons, checkboxes, radio buttons, multiple-selection lists, and so on. Though buttons are easy to customize, it's a bit more complicated with such elements as checkboxes.

Browsers don't allow developers to fully customize them, so they hide the actual element and replace it with one that behaves the same.

In this task you will create your own checkbox with a unique design.

Follow this algorithm to create a custom checkbox:

1. Hide <input>
2. Add <label> and connect it with <input>
3. Since <label> and <input> are connected, clicking label makes the checked state for input change
4. Use the pseudo element to create a custom design for the checkbox
5. Specify the layout in CSS for a pseudo element when active state is checked and when state is inactive for <input>

app.css

Use available variables to create a custom checkbox following the layout above. For the : hover and :focus states use the same background as for --checkbox-checked variable, but make it semi-transparent.

Tips

• To style the active checkbox, use the :checked pseudo-class
• To make something semi-transparent use the opacity property with a value 0.5
• Add a cursor property with a value pointer to <label>