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:
<label>and connect it with
<input>are connected, clicking
- Use the pseudo element to create a custom design for the checkbox
- Specify the layout in CSS for a pseudo element when active state is
checkedand when state is inactive for
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
- To make something semi-transparent use the
opacityproperty with a value
- Add a
cursorproperty with a value
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.