Grokking CSS Design Patterns to Ace Interviews/

...

/

Problem: Floating Label Input with Validation Message

Problem: Floating Label Input with Validation Message

Try to create a floating label email input that shows a custom validation message below when invalid and not focused, using only CSS.

We'll cover the following...

Problem description

Given an HTML page containing a <div class="validate-wrapper"> that wraps an <input type="email" id="email" class="validate-input" placeholder=" " required> and a <label for="email" data-error="Please enter a valid email address">Email</label>, write CSS to:

  • Define CSS variables on .validate-wrapper: --primary-color, --error-color, and --transition-duration.

  • Set .validate-wrapper ...