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:
- Hide
<input>
- Add
<label>
and connect it with<input>
- Since
<label>
and<input>
are connected, clickinglabel
makes thechecked
state forinput
change - 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
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 value0.5
- Add a
cursor
property with a valuepointer
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.