Search⌘ K

Three-State Checkbox with Indeterminate Animation

Explore how to create a custom tri-state checkbox using CSS that supports unchecked, checked, and indeterminate states with smooth transitions and a pulsing animation. Understand how to hide native inputs and style elements with pseudo-classes and keyframe animations to improve accessibility and design in form controls.

Problem description

Given an HTML page containing the following:

  • A <label> with class tri-checkbox that wraps:

    • A native <input type="checkbox" class="tri-state">

    • A <span class="checkmark"></span>

    • The text “Agree to terms”

Write CSS to:

  • Hide the native checkbox input. ...