应统一表单控件尺寸与交互样式：使用box-sizing: border-box，重置padding/border/margin；select和textarea需单独处理min-height与line-height；用clamp()或rem实现响应式高度；禁用outline改用box-shadow确保焦点态一致；真机测试覆盖各平台渲染差异。
input、select、textarea 默认尺寸差异大
浏览器对不同表单控件的默认 height、padding、border 和 box-sizing 处理不一致，比如 input[type="text"] 在 Chrome 中默认有 2px 边框和 1px 内边距，而 select 通常更高、内边距更大，textarea 还带滚动条占位。直接设统一 height 会导致内容被裁切或垂直居中偏移。
- 统一使用
box-sizing: border-box，避免尺寸计算歧义 - 显式重置
padding、border、margin，不要依赖浏览器默认值 - 对
select和textarea单独处理min-height和line-height，避免文字贴顶 - 移动端需注意
font-size影响控件实际高度（iOS Safari 会放大小于16px的输入框）
用 rem 或 clamp() 实现响应式控件高度
固定像素值（如 height: 40px）在小屏上容易撑出横向滚动条，或在大屏上显得过小。用相对单位才能真正响应。
- 推荐用
clamp(36px, 4vh, 48px)：小屏取最小值，中屏随视口缩放，大屏封顶 - 或基于根字号：设
html { font-size: clamp(14px, 2.5vw, 18px); }，再用height: 2.5rem - 避免对
textarea直接设height，改用min-height+resize: vertical - 所有控件加
vertical-align: middle，解决行内排列时基线不对齐问题
聚焦态与用户交互反馈不一致
统一尺寸后，如果只改外形不处理状态样式，:focus 下的轮廓（outline）、阴影（box-shadow）仍可能错位或遮挡内容，尤其在 iOS 上 outline 偏移常见。
- 禁用原生
outline：outline: none，改用box-shadow: 0 0 0 2px #007bff - 确保焦点样式有足够的对比度，且不改变控件布局（
box-shadow不触发重排） - 为
select添加appearance: none后，必须手动加下拉箭头背景图，否则 iOS 无提示 - 测试真机：Android Chrome 的
input聚焦会自动放大，需加viewport的user-scalable=no（慎用）或限制最小字号
媒体查询中遗漏控件类型或断点
只在 @media (max-width: 768px) 里调尺寸，但忘了 input[type="date"]、input[type="range"] 在小屏上有特殊渲染逻辑；或者断点没覆盖折叠屏（如 1024px 宽但 576px 高）。
立即学习“前端免费学习笔记（深入）”；
- 把所有表单控件选择器列全：
input, select, textarea, button, [type="date"], [type="range"] - 用
screen and (max-height: 600px)补充竖屏窄高场景 - 对
input[type="checkbox"]和input[type="radio"]单独控制width/height，它们默认不响应font-size - 用
prefers-reduced-motion降级动画，避免transition在低端设备卡顿导致尺寸闪烁
/* 示例：基础统一样式 */
form * {
box-sizing: border-box;
}
input, select, textarea, button {
width: 100%;
padding: 0.5rem 0.75rem;
margin: 0;
border: 1px solid #ccc;
font-size: 1rem;
line-height: 1.5;
vertical-align: middle;
}
select {
min-height: calc(1.5em + 1.5rem);
}
textarea {
min-height: 6rem;
resize: vertical;
}
@media (max-width: 480px) {
input, select, textarea {
padding: 0.4rem 0.6rem;
font-size: clamp(14px, 4vw, 16px);
}
}真正麻烦的不是写几行 CSS，而是不同控件在不同系统里对同一规则的实际渲染结果——比如 line-height 对 select 无效，height 对 textarea 会压制用户拉伸行为，还有 iOS 自动缩放带来的字体重绘时机问题。这些得靠真机连测，光看 Chrome DevTools 模拟器不够。
