Problem description

Given an HTML page with an <input class="accessible-checkbox" type="checkbox">, write CSS to meet the following requirements:

• When the checkbox is focused (for example, using the Tab key), it should display a visible blue focus ring.

• The focus ring must be a 2px solid #2684FF outline, offset by 2px from the checkbox.

• The default browser outline should not appear; only your custom focus ring should show.

Goal

Provide a clear, custom focus indicator for the checkbox to make it accessible for keyboard users.

Constraints

Do not use JavaScript or change HTML structure.

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.