极简表单的关键是视觉干扰最小化：用border-bottom单边下划线配合background:none，既不撑高元素、又利于对齐与触控，且兼容性好；需注意label与input的基线错位及响应式下划线长度控制。
极简表单的关键不是删减元素，而是让视觉干扰降到最低——border-bottom 单边下划线 + background:none 是最轻量、最可控的实现方式，比全边框或阴影更易对齐、更少兼容性问题。
为什么用 border-bottom 而不用 border
全边框（border: 1px solid #ccc）会撑开元素高度、干扰垂直居中，且在多行文本或密码输入时容易显得笨重。而只保留底部边框：
-
border-bottom不影响input的行高和内边距计算，与label对齐更自然 - 移动端点击区域不会因左右边框被压缩，触控更友好
- 配合
background:none后，输入框完全“透明”，仅靠线条定义边界，视觉负担最小 - IE11 及以上、所有现代浏览器均原生支持，无 polyfill 需求
background:none 的实际效果与注意事项
它不只是“去掉背景色”，而是显式切断所有背景继承（包括父级 background-color 或 background-image），确保输入框真正“空”。但要注意：
- 必须搭配
border-bottom使用，否则输入框会彻底“消失”（只剩文字） - 若父容器有
background，且你希望输入框略带灰底，应改用background: transparent，而非none -
background:none对input[type="date"]或input[type="time"]在 Safari 中可能触发默认下拉箭头遮挡，需额外加appearance: none
常见布局陷阱：label 与 input 垂直错位
即使用了 border-bottom 和 background:none，label 文字仍常比 input 文字高半像素——这不是 bug，是字体基线默认行为。解决方法很直接：
立即学习“前端免费学习笔记（深入）”；
- 给
label加vertical-align: middle或bottom - 给
input加vertical-align: bottom（比middle更稳定） - 避免对
input设置line-height，它会干扰 baseline 对齐；改用padding控制上下留白 - 如果 label 是块级（
display: block），input 就别设width: 100%，否则 padding 会导致横向溢出；建议用box-sizing: border-box
响应式下划线长度控制
纯 border-bottom 默认铺满整个 input 宽度，但在窄屏或 flex 布局中容易过长。可精准控制长度：
- 用
max-width限制：例如max-width: 300px，适合固定宽度场景 - 用
width+margin: 0 auto居中，但需配合display: block - 最灵活的是伪元素方案：
::after绘制一条独立下划线，长度、颜色、粗细完全独立于 input 边框 - 注意：iOS Safari 对
input::after支持不稳定，优先用 wrapper 包裹再伪元素定位
真正难的不是写这两行 CSS，而是判断什么时候该让下划线断开（比如 disabled 状态）、什么时候该加 hover 动画、以及如何让 error 状态的红色下划线不突兀——这些细节才是极简风格落地的分水岭。
