每日挑战 #12： “Invisible Inputs” 表单 🧾
发布: (2026年2月24日 GMT+8 16:30)
3 分钟阅读
原文: Dev.to
Source: Dev.to
公告
今天是 2 月 24 日。
在开始之前先说一下：这将是最后一次每日挑战。每天出一道题目非常有趣，但也需要投入大量精力。为了保持创意新鲜、质量高，这个系列将改为每周一次。
下一个挑战将在下周发布。
任务
构建一个完全交互式的表单，所有输入框都不可见，但用户仍能从头到尾完成填写。
你的任务是通过布局、标签、焦点状态以及巧妙的 CSS 视觉效果来完整引导用户。
规则 🫥
- 不使用 JavaScript – 仅限 HTML + CSS。
- 输入框必须在视觉上隐藏，但仍保持可访问性和功能性。
- 使用标签、焦点状态或动画来向用户展示当前所在位置。
- 表单必须可完成（文本框、复选框、单选框——自行选择）。
目标 🏆
创建一个表单，使其满足以下条件：
- 输入框默认隐藏。
- 获得焦点时显示提示或上下文信息。
- 用户仍能填写每个字段。
- 整体体验像是一次 CSS 魔法表演。
专业提示
:focus-within 是你的秘密武器。它可以在用户与隐藏字段交互时显示说明、突出显示区域或为容器添加动画。
如何参赛
在评论区留下你的 CodePen 或 GitHub 仓库链接。
加分项
如果你的表单包含：
- 仅用 CSS 实现的进度指示器。
- 无需 JS 的“成功”状态。
- 完全语义化的 HTML。
— 那么你就已经掌握了隐形用户体验。
祝你好运，玩得开心，享受这最后一次每日挑战，在我们转为每周更新之前。迫不及待想看到你的作品！