Problem description

Given an HTML page containing a label with the class .custom-checkbox that wraps a native checkbox input, a span element with class .checkmark, and the text “Subscribe to newsletter”, write CSS to:

• Hide the native checkbox input.

• Style the .checkmark as a 20×20 px square with a 2px solid border and a slight border-radius.

• Use ::after on .checkmark to draw a tick mark when the checkbox is checked.

• Change the background-color of the box to #2196F3 when :checked.

Goal

Write the necessary CSS rules so that the .custom-checkbox displays a square "checkbox" that fills with color and shows a white tick when selected.

Constraints

• Use only CSS (no JavaScript).

• Checkmark box size should be 20px by 20px.

• Border should be 2px solid #666, border-radius should be 4px.

• Checked background-color should be #2196F3.

• Tick mark should be white, drawn via ::after, sized and positioned appropriately.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.