表单是一个网站里唯一必须用户动手的地方。别的页面看不懂可以往下划，表单填不完就是流失——而且流失得静悄悄，你从数据里只能看到「进了注册页但没提交」，看不到他卡在了哪一格。
所以这一类效果有个跟其他视觉组件不一样的评判标准：所有装饰都要为「填完」让路。一个动效再精巧，只要它让用户多犹豫两秒、或者让密码管理器认不出这是密码框，它就是负分。
有条底线在挑之前就该定下来：自定义表单控件最容易丢掉的是原生行为。原生的 <select> 在手机上会唤起系统的选择器（那是用户最熟的交互）、支持键盘输入首字母跳转、被辅助技术直接识别成下拉列表。一旦用 div 和 JS 重写一个「更好看的下拉框」，这些全都得自己补回来，而多数人只补了外观。所以下面第三组里，能用纯 CSS 美化原生控件的那一款，实际价值比看起来高。
下面 14 款分四组：登录与注册表单、输入框与搜索框、下拉选择框、单选与复选。每款都写了它适合放在哪儿、以及会带来什么代价。
第一组 · 登录与注册表单（01 - 05）—— 用户对你的第一次「动手」
01. 毛玻璃登录表单，纯 CSS、不用图片
纯 CSS 背景模糊 无 JS 无图片素材
黄橙紫蓝四色渐变铺底，表单卡片用半透明白底加背景模糊，配一圈浅色描边和柔和投影，卡片对角各放一枚渐变圆球透过玻璃隐约映出色彩。结构是完整的：圆角输入框、账号头像图标、登录按钮、「忘记密码 / 注册」链接。
它最实用的一点是零素材依赖——没有 JavaScript，也没有一张图片，整个效果由渐变和模糊堆出来。这意味着你不用管图片压缩、不用担心暗色模式下背景图不搭，改渐变配色和圆角就能换成另一套风格，接入现有登录逻辑也不会跟任何库打架。
要留意背景模糊在低配机器上是有成本的：backdrop-filter 需要浏览器实时对底层内容做模糊运算，全屏大面积使用时，老机器和低端安卓上会有掉帧。登录页只有一张卡片，量级可控，但如果你打算把这套毛玻璃铺到整站，先在真机上试。
02. 机器人守卫登录表单 —— 本文完成度最高的一款
CSS 3D + 原生 JS 密码强度检测 无障碍标签 动效可降级
一个叫 Volt 的机器人全程用对话气泡陪着你填表，每一步都有对应的反应：
眼球跟随鼠标和输入进度转动，还会不定时眨眼；
邮箱格式正确时露出笑脸，格式不对则给出提示；
点进密码框时，它会礼貌地把头转过 180° 背对屏幕，后脑勺亮起强度指示灯，随密码复杂度从「太短」一级级跳到「固若金汤」；
漏填会抖动提醒，登录成功原地转圈撒花。
纯 HTML + CSS 3D + 原生 JavaScript，不依赖任何第三方库。
那个「转过头去」的设计值得单独说：它把一句抽象的隐私承诺变成了一个看得见的动作。密码强度检测本身是标配，但用户看到的通常只是一根进度条；让机器人背过身，等于告诉用户「我没在看」——这种用交互本身传达信任的做法，比在页面上写一行「我们不会存储您的密码」有效得多。
更难得的是它把该守的都守住了：介绍里明确写了兼顾无障碍标签与「减弱动效」偏好设置，动画可以自动降级。本文十四款里，明确交代了这一点的只有它一个。开了减弱动效的用户依然能正常登录，而不是对着一个不转头的机器人发懵。
它的代价是这套动效脚本本身有分量，而且高度定制——想改机器人的形象或者对话文案，得读懂它的状态机。只适合放在你确实想留下印象的入口，后台管理系统的登录页用它就过头了。
03. 简约登录注册，加号图标切换两个界面
CSS 登录/注册切换 简约风格
界面干净，邮箱与密码输入框、登录按钮、找回密码入口都在，点右上角的加号图标在登录与注册两个界面之间切换。
「一个页面装两套表单」是登录页的主流做法，但它有个前提容易被忽略：切换要能被链接直达。用户从邮件里点「立即注册」跳过来，落在登录界面上再让他自己找加号，转化就掉了。实现的时候记得给注册态一个可寻址的状态（比如 #register），否则这个交互只在站内点得通。
它的定位就是简约，胜在不出错——放在任何风格的站上都不违和，也不会有性能负担。想要个人格化或者品牌感，看第 02、04 款。
04. 新拟态风格，靠阴影做出凹凸质感
CSS + JS Neumorphism 左右交换切换
新拟态（Neumorphism）路线，靠 CSS 的框阴影做出柔和的凹凸质感和微妙光影，点登录或注册按钮时两个界面左右交换位置。视觉上是「软 UI」那一挂，介绍里给的场景是管理系统、金融应用与高端产品登录页。
新拟态好看，但它有个众所周知的硬伤：对比度。这套风格的核心是「元素和背景同色，只靠明暗阴影区分」，而这恰恰跟无障碍要求的正文 4.5:1 对比度天然对立——按钮和背景几乎一个颜色，弱视用户看不出哪里能点。用它可以，但必须给关键元素（输入框边界、主按钮）补足对比度，别把整套表单都做成同一个灰。
另外这种风格对背景色极其挑剔：新拟态只在特定的中间调灰色系上成立，换成深色或高饱和背景，阴影立刻失效。想清楚你的品牌色能不能容下它。
05. 水下光影背景，纯 CSS3 渐变做的氛围
纯 CSS 光线折射动画 主题化
背景是模拟海底阳光折射的动态光线，用 CSS3 渐变与动画实现，营造深海氛围。介绍里给的场景很具体：潜水类网站、海洋主题项目。
它代表了登录页的另一种做法——不做通用组件，而是把登录页当成品牌氛围的延伸。用户在这一页停留的十几秒，是你少有的、他必须看着屏幕的时刻。做主题化的站（旅游、潜水、游戏、活动），这一页值得跟主视觉呼应，而不是套一个跟全站毫无关系的白卡片。
代价当然是它绑死在一个主题上，换个行业就得重做背景。另外动态背景是持续在跑的动画，登录页停留时间短问题不大，但记得给开了减弱动效偏好的用户一个静态版本。
第二组 · 输入框与搜索框（06 - 09）—— 用户手指真正落下的地方
06. 流光边框的 AI 风格输入框，纯 CSS
纯 CSS filter: blur() 伪元素 无 JS
药丸型容器配多色渐变流动的霓虹光晕，复刻的是现在 AI 交互界面那套视觉语言。技术上很值得学：用 linear-gradient 铺四色渐变，再用 filter: blur() 产生弥散阴影，让输入框像悬浮在一片数字云团上，整个过程靠伪元素完成，不需要 JavaScript 参与。
这一款放在这里，是因为它精准踩在一个当下的设计趋势上：AI 产品的输入框正在取代按钮，成为页面的主要入口。过去首页的转化点是「立即试用」，现在越来越多是一个「问点什么」的输入框。做 AI 工具、智能客服、搜索类产品的，这个组件的位置就是你页面的心脏。
两个注意点。一是光晕会抢焦点状态：本来就一直在发光的输入框，用户点进去之后很难看出「已聚焦」，得另外加一层可辨识的焦点样式，键盘用户尤其依赖这个。二是持续跑的渐变动画在长页面上要考虑用 prefers-reduced-motion 关掉。
07. 占位符上浮，融进上层边框
纯 CSS 浮动标签 聚焦反馈
输入框获得焦点时，里面的提示文字上移并融入上层边框，成为一个小标题。纯 CSS 实现，是注册、登录、在线表单里最常见的一种交互。
这个效果流行，同时也是表单无障碍问题的重灾区，值得把话说透。W3C WAI 说得很直接：「占位符文本不能替代标签。屏幕阅读器等辅助技术不会把占位符文本当作标签。」它列的问题有四条——辅助技术不识别、开始输入后提示就消失了导致用户无法在提交前核对、跨浏览器与辅助技术的支持不完整、以及浏览器默认的占位符颜色通常达不到对比度要求。
所以正确的用法是：这一层浮上去的文字必须是真正的 <label>，用 for 和输入框的 id 关联好，只是用 CSS 让它在未聚焦时视觉上落在框内。做成这样，它就是加分项——既省空间，又保住了标签始终可见。反过来，如果只是给 placeholder 加了个动画，那是把一个可访问的表单改成了不可访问的。
08. 短信验证码输入框，单元素纯 CSS 实现
纯 CSS 伪元素 无额外 DOM
验证码那种一格一位数字的输入控件，这一款用伪元素和样式切换实现了 0–9 的数字呈现，不需要为每一位单独建 DOM 节点，支持输入与删除。
验证码框看着简单，实际是表单里最容易做砸的组件之一——多个 input 之间的焦点转移、退格时该退回上一格、粘贴六位数字要能自动分配到各格，这些逻辑写不好，用户填一次验证码要按十几次键。这一款把 DOM 结构压到最简，是个不错的起点。
但有一件事它给不了，你必须自己加：autocomplete="one-time-code" 和 inputmode="numeric"。前者让手机能把刚收到的短信验证码直接推到输入框上方一键填入，后者让手机弹出数字键盘而不是全键盘。这两个属性加不加，用户的实际体验差得很远，而且它们不属于视觉效果，模板不会提醒你。
09. 活板门摆动打开的输入框
CSS + 少量 JS 机械动感 弹性回弹
点击输入框时，顶部一侧的边框像活板门一样向下摆开，带弹性回弹。CSS3 动画加少量 JS，介绍里给的场景是注册登录、问卷调查和搜索框。
它最合适的位置是全屏搜索框——那种点击放大镜之后铺满屏幕的搜索层。全屏搜索有个固有的尴尬：突然盖住整个页面，用户会有一瞬间的失去方向。一个有明确「打开」动作的入场动画，恰好把这个突兀感填上了，让用户理解「这是一个层被打开了」，而不是「页面变了」。
用在常规表单里就要克制。一屏上有五个输入框，每一个点进去都摆一次门，会很闹。这类有存在感的动效适合唯一的、被主动触发的入口，不适合批量使用。
第三组 · 下拉选择框（10 - 12）—— 最容易把原生能力弄丢的一类
10. 纯 CSS 美化原生 select，本组最该优先考虑的一款
纯 CSS 覆盖原生 select CSS 变量 无 JS
关键在于做法：它是用样式覆盖原生的 <select> 元素，而不是用 div 另造一个。仅靠 CSS 变量和伪元素就实现了展开收起动画、选项高亮与状态反馈，完全没有 JavaScript。演示用的是龙与地下城的职业选项，粉紫配色。
回到开头那条底线——这一款把原生行为全保住了：手机上点开是系统的原生选择器（用户最熟、最好操作的那个），键盘敲首字母能跳到对应选项，辅助技术识别它就是一个下拉列表，表单提交时它本来就在 FormData 里。这些能力在下面两款重写方案里，都得靠开发者补。
它的天花板也在这儿：原生 select 能改的样式是有限的，选项列表内部（每一项的图标、副标题、分组样式）在多数浏览器里改不动。要富内容的下拉，就得往下看。这是一个明确的取舍，不是谁更好。
11. 带搜索自动补全的下拉，选项多的时候必须用
CSS + JS 搜索过滤 选项带图标 深色主题
支持搜索过滤与自动补全，选项带个性化图标，深色主题配渐变背景，悬停与选中状态都做得明显。适合会员系统、产品分类、设置面板。
选项超过大约二十个，就该上带搜索的下拉了。国家列表、城市、行业分类、商品品类这些场景，让用户在一个长条里滚动找目标是很折磨的，而输入两个字母直接筛出来是几秒钟的事。这一款给的正是这个能力，而原生 select 做不到。
代价是它是重写的组件，前面那些原生能力要自己补：
方向键上下移动、回车选中、Esc 关闭；
焦点从触发器进入列表、关闭后再回到触发器；
正确的 ARIA 角色，让辅助技术知道这是一个下拉列表而不是一堆 div。
这些不是锦上添花，是「能不能用键盘完成注册」的问题。选这类组件时，第一件事是把鼠标挪开，光用键盘走一遍。
12. 液态玻璃风下拉，切换有流体过渡
CSS + JS 深色半透明 流体切换动画
深色半透明设计，柔和光晕，切换选项时用流体般的动画衔接，代替了普通下拉那种生硬跳转。外观简洁但细节到位，定位是现代科技类应用、系统设置面板与高端 UI。
它和上一款的区别是目标不同：那一款解决「选项太多」，这一款解决「选项不多但要好看」。系统设置里的主题切换、语言切换、排序方式这类选项通常就三五个，不需要搜索，需要的是切换时不要让界面「跳一下」。流体过渡填的正是这个空隙。
同样要补键盘与 ARIA。另外深色半透明的下拉浮层压在深色内容上时，边界会很难辨认——透明度和描边得在真实内容上调，别只在演示页的纯色背景上看着好就定了。
第四组 · 单选与复选（13 - 14）—— 小控件，大点击区
13. 图片单选按钮组，点击带弹跳反馈
纯 CSS :checked 状态 弹性动画
用图片代替文字做单选项，点击时触发弹跳反馈。基于 CSS 弹性动画与 :checked 状态切换实现，没有 JS。适合趣味表单、图片选择器、投票界面。
它的实际价值在于「大点击区」。标准的单选按钮是一个直径十几像素的小圆点，在手机上极难精准点中；把整张图片变成可点区域，命中率立刻上来了。选套餐、选风格、选头像、评分打分这些场景，图片选项既好点又比文字说得清楚。
它的实现方式（:checked 加相邻选择器）意味着真实的 <input type="radio"> 还在，只是被视觉隐藏了——这是对的做法，键盘和辅助技术仍然能操作它。要确认的是隐藏方式：用 opacity: 0 或者裁剪的方式隐藏没问题，用 display: none 会让它从焦点顺序里消失，键盘用户就选不了了。
14. GSAP 弹性光晕复选框
CSS + GSAP 霓虹光晕 弹性过渡
勾选时，对勾图标会触发彩色霓虹光晕的弹性晃动，光晕从图标左侧向右侧过渡，最终稳定成发光状态。基于 CSS 加 GSAP。
复选框的反馈比单选更重要，因为多选是可以反悔的——用户会来回勾选、比较、再取消，每一次操作都需要一个明确的「已生效」信号。一个只是颜色变深的对勾，在快速连点时很难确认到底选中了几个；带动画的状态切换，反馈要清楚得多。
两点提醒。一是它引入了 GSAP，为几个复选框背一整个动画库并不划算——如果页面上本来就在用 GSAP（比如配合本文第 09 款那类动效），顺手用；如果只为这一个组件，用 CSS 过渡实现一个简化版更合理。二是光晕不能是唯一的选中标志：色觉障碍用户可能分不清光晕的颜色变化，对勾图标本身的出现与消失才是可靠的信号，别把它做得太弱。
装完效果之后，这三件事决定表单能不能填完
一、标签必须是真标签。前面第 07 款那一节说过一次，这里再强调一遍，因为它是最普遍的错误：浮动标签、图标提示、占位符文案，都不能代替一个用 for 和 id 关联好的 <label>。判断方法很简单——点一下那行提示文字，如果输入框没有获得焦点，那它就不是标签。
二、把 autocomplete 写全。这不只是方便，它是明确的无障碍要求。WCAG 成功准则 1.3.5「识别输入目的」是 AA 级，要求收集用户自身信息的输入框，其用途能被程序识别，主要的实现方式就是 autocomplete 属性——email、given-name、tel、new-password、one-time-code 这些值。写全了，浏览器和密码管理器能自动填，认知障碍用户也能得到额外的图标提示；漏了，用户每次都得手打。这一步不改一行样式，成本几乎为零，收益却是实打实的完成率。
三、错误提示要留在原地。表单最大的流失点不是填写，是提交失败之后。把错误信息放在对应字段旁边、用文字说清楚哪里不对（而不是只把边框变红）、并且不要清空用户已经填好的内容——尤其是密码框，重填一遍密码足以让人放弃注册。上面这十四款给的都是「填的时候」的体验，「填错之后」的体验得你自己补，而后者对转化的影响更大。
最后按成本收个尾：本文十四款里有七款是纯 CSS 的，不引入任何脚本；两款用了 GSAP 或较重的定制脚本；其余在 CSS 加少量 JS 这一层。表单是全站最不该为视觉牺牲可靠性的地方——同等效果下，优先选不带脚本的那一款，出问题的面小得多。
本文的 14 款都在童哲网前端资源板块。相关的几篇：CSS 按钮与开关交互效果（提交按钮和开关控件在那一篇）、卡片与布局效果合集（装表单的容器）、CSS 加载动画与进度条效果（提交等待时该给的反馈）。
