Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Custom Floating Label Input

Solution: Custom Floating Label Input

Let’s create a floating-label input where the label moves above the field on focus or when filled, using only CSS.

We'll cover the following...

Problem description

Given an HTML page containing a div with class float-label that wraps an <input type="text" class="floating-input" placeholder=" " id="username" required> and its associated <label for="username">Username</label>, write CSS to:

    ...