表单控件需统一重置样式：box-sizing: border-box；显式设置padding、border、border-radius；用box-shadow模拟focus状态并兼顾:focus-visible；ios下确保font-size≥16px、line-height明确、-webkit-appearance:none；select需伪元素自定义箭头；所有控件加vertical-align:middle。
input 和 textarea 默认样式差异大
浏览器对 input 和 textarea 的默认 padding、border、border-radius 不一致，比如 Chrome 下 input[type="text"] 通常有 padding: 1px 2px，而 textarea 是 padding: 2px，且带滚动条内边距。不重置就容易出现高度不齐、圆角错位、聚焦框偏移等问题。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一用
* { box-sizing: border-box; }避免尺寸计算混乱 - 对所有表单控件显式设置
padding（如padding: 8px 12px），别依赖默认值 -
border必须写全：例如border: 1px solid #ccc，不能只写border: 1px（否则 Safari 可能渲染为border: 1px none） -
border-radius建议设为4px或6px，避免0和9999px这类极端值——前者在部分安卓 WebView 中触发渲染 bug，后者影响可访问性焦点环显示
Chrome / Safari 下 focus outline 与 border 重叠
当给 input:focus 加了 border-color: #007bff，同时又没处理 outline，Chrome 会叠加默认蓝色外框，导致视觉臃肿；Safari 则可能让 outline 盖住 border-radius 圆角。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
outline: none移除原生焦点框，但必须同步提供替代方案 - 改用
box-shadow: 0 0 0 2px rgba(0, 123, 191, 0.25)模拟 focus 状态，它尊重border-radius - 确保
:focus-visible也覆盖（尤其键盘操作场景），避免可访问性问题：input:focus, input:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(0, 123, 191, 0.25); }
移动端 iOS 输入框高度异常、光标偏移
iOS Safari 对 input 有额外行高控制逻辑：若 font-size 小于 16px，或未设 line-height，会导致实际高度压缩、光标垂直居中失效，看起来像“被截掉一半”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给所有表单元素设
line-height: normal或明确值（如line-height: 1.5），不要留空 -
font-size建议 ≥16px，否则 iOS 会强制缩放，破坏你设的padding和height - 避免用
height硬控输入框高度——优先靠padding + font-size + line-height组合撑开，更稳定 - 加
-webkit-appearance: none关闭 iOS 默认样式（包括圆角和内阴影）
select 下拉箭头在不同浏览器里位置/大小不一
select 元素的原生下拉箭头无法用 CSS 直接调整位置或颜色，Firefox 不支持 appearance，Chrome 又把箭头画在 border 内侧，导致和同级 input 的 padding-right 对不齐。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
appearance: none隐藏原生箭头（注意加-webkit-和-moz-前缀） - 包裹一层
<div class="select-wrapper">，用<a style="color:#f60; text-decoration:underline;" title="伪元素" href="https://www.php.cn/zt/15988.html" target="_blank">伪元素</a> <code>::after手动画箭头，位置完全可控 - 为保持高度一致，
select内部需设padding-right: 32px（留出箭头空间），再用background-position: right 12px center微调 - 务必测试 Windows Edge + Chrome + iOS Safari 三端，
select是兼容性黑洞区
细节上最易忽略的是：所有表单控件都得加 vertical-align: middle（尤其和文字混排时），否则 baseline 对不齐；还有 input[type="number"] 在 Chrome 里自带上下微调按钮，要隐藏得用 ::-webkit-inner-spin-button { appearance: none; } 单独处理。
