HTML: Custom Checkbox

Last update: 28 Aug 23:20

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.

Custom CheckBox

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>


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.


  • 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>

For full access to the challenge you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
hours of theory