Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Three-State Checkbox with Indeterminate Animation

Solution: Three-State Checkbox with Indeterminate Animation

Let’s create a three-state checkbox that visually handles unchecked, checked, and indeterminate states with tick and dash animations using only CSS.

We'll cover the following...

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. ...