Grokking CSS Design Patterns to Ace Interviews/

...

/

Problem: Custom Floating Label Input

Problem: Custom Floating Label Input

Try to 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:

  • Position the label inside the input field so it appears as placeholder text. ...