Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Custom Email Input with Inline Validation Icons

Solution: Custom Email Input with Inline Validation Icons

Let’s create a styled email input that shows a check or cross icon for valid or invalid states using only CSS and relational selectors.

We'll cover the following...

Problem description

Given an HTML page containing a <div class="input-wrapper"> that wraps an <input type="email" id="email" class="validation-input" placeholder="Enter your email" required>, write CSS to:

  • Define CSS variables on .input-wrapper: --valid-color, --invalid-color, and --transition-duration.

  • Style .validation-input in the following manner:

    • Width should be 100%, padding-right should be 2rem (space for icon), padding-left should be 0.5rem, and height should be 2rem.

    • Border should be 1px solid #ccc, border-radius should be 4px.

    • Transition on ...