/custom-checkbox

Primary LanguageCSS

Custom Checkbox

Summary

A custom-styled and accessible checkbox.

Task

Using plain HTML, CSS, and JS (no third-party libraries and frameworks), create a styled checkbox that preserves the accessibility of a native checkbox (keyboard toggle). Use as little JS as possible/reasonable.

Acceptance Criteria

  • The custom checkbox is styled similar to what you see in the video (find a checkmark SVG in Assets below).
  • Clicking the native checkbox, the custom checkbox is displayed and checked as well.
  • Clicking the custom checkbox, the native checkbox is checked as well.
  • Using the keyboard (tab), when the native checkbox is focused, a blue line appears around the custom checkbox.
  • Using the keyboard (tab), when the native checkbox has focus and the user presses space, the native checkbox is selected as well as the custom checkbox.
  • When hiding the native checkbox, the native accessibility (keyboard navigation: tab, space) is preserved for the custom checkbox.

Instructions

  • Open index.html
  • To display the native checkbox, remove the visually-hidden CSS class.