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.

• Use the .float-label wrapper’s :focus-within or the input’s :focus and :not(:placeholder-shown) states to trigger styling.

• Animate the label to move above the input (e.g., top: 0), scale down (e.g., scale(0.8)), and change color (e.g., #0066cc).

• Ensure smooth transitions for position, transform, and font-size.

Goal

Write CSS rules that create a text input where the label floats up and shrinks when the user focuses the field or has entered text, mimicking a material-design style floating label.

Constraints

• Use only CSS (no JavaScript).

• Input dimensions should be as follows: width 100%, padding 0.75rem 0.5rem, border 1px solid #ccc, and border-radius 4px.

• Label initial should be as follows: positioned absolutely at left 0.5rem, top 50%, transformed translateY(-50%), font-size 1rem, and color #666.

• Floated label should be as follows: top 0, transformed translateY(-100%) scale(0.8), font-size 0.8rem, and color #0066cc.

• Transitions should be as follows: top, transform, and font-size over 0.2s ease.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.