Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Floating Label Input with Validation Message

Solution: Floating Label Input with Validation Message

Let’s 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 to position: relative with top padding for the floating label and bottom ...