It is February 24th. -
Quick announcement before we begin: this will be the last daily challenge. Creating one every single day has been a blast, but also a lot to keep up with. To keep the ideas fresh and the quality high, the series will now shift to a weekly format.
The next challenge will drop next week.
Now — today’s mission.
The Mission
Build a fully interactive form where none of the inputs are visible, yet the user can still complete it from start to finish.
Your job is to guide the user entirely through layout, labels, focus states, and clever CSS illusions.
The Rules 🫥
- No JavaScript Pure HTML + CSS only.
- Inputs must be visually hidden But still accessible and functional.
- Use labels, focus states, or animations To show the user where they are.
- The form must be completable Text fields, checkboxes, radios — your choice.
The Goal 🏆
Create a form where:
- Inputs are hidden by default
- Focusing reveals hints or context
- The user can still fill out every field
- The whole thing feels like a CSS magic trick
Pro Tip
:focus-within is your secret weapon.
It lets you reveal instructions, highlight sections, or animate containers when the user interacts with hidden fields.
How to enter
Drop your CodePen or GitHub Repo in the comments.
Extra Credit
If your form includes:
- A CSS‑only progress indicator
- A “success” state with no JS
- Fully semantic HTML
—you’ve mastered invisible UX.
Good luck, have fun, and enjoy the last daily drop before we go weekly. Can’t wait to see what you build.
Top comments (0)