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 padding for error space.

• Style .validate-input with width: 100%, padding, border: 1px solid #ccc, border-radius: 4px, background: #fff, and no outline.

• Absolutely position the label inside the wrapper at left: 0.5rem, top: 2.375rem, with transform: translateY(-50%), background: #fff, and add transitions for top, transform, and color.

• Float the label above the input using .validate-input:focus + label and .validate-input:not(:placeholder-shown) + label, setting top: 1rem, transform: translateY(-50%) scale(0.8), and color: var(--primary-color).

• Style label::after to show the validation message using content: attr(data-error), placed at top: 4.5rem, left: 0, with font-size: 1.1rem, color: var(--error-color), opacity: 0, and transform: translateY(-0.5rem).

• Reveal the error message when the input is invalid and unfocused using .validate-input:invalid:not(:focus):not(:placeholder-shown) + label::after, setting opacity: 1 and transform: translateY(0).

Goal

Write CSS rules so that the label floats above the input on focus or when filled, and a red error message appears beneath the field when the input is invalid.

Constraints

• Use CSS only (no JavaScript is allowed).

• CSS variables should be --primary-color: #0066cc;, --error-color: #cc0000;, and --transition-duration: 0.2s;.

• Floating label transforms to scale(0.8) and moves to top: 0.

• Error message transitions should be opacity and transform over --transition-duration.

• Use attr(data-error) in content for the error message.

• Ensure pointer-events: none on pseudo-elements.

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.