用 border-radius 圆角化表单控件时，需注意 Safari≤12 对 select 箭头圆角渲染异常、Chrome/Firefox 中 number 类型 spin buttons 不跟随圆角、IE11 不支持 appearance 属性；padding 导致文字错位应同步设置 line-height 和 box-sizing；button 与 input[type="submit"] 高度不一致需统一 padding 和 box-sizing；focus outline 应用 outline-offset 或 box-shadow 适配圆角；移动端 iOS Safari 中 select 原生渲染使圆角失效，需容器级视觉补偿。
用 border-radius 圆角化表单控件时要注意哪些兼容性问题
现代浏览器对 input、select、textarea 的 border-radius 支持良好，但 Safari 在旧版本（≤12）中对 select 下拉箭头区域的圆角渲染不一致，可能残留直角或裁剪箭头。Chrome 和 Firefox 对 input[type="number"] 的上下微调按钮（spin buttons）默认不跟随 border-radius，需额外重置。
- 统一圆角建议设为
border-radius: 6px，避免过大（如12px）导致与父容器视觉脱节 - 对
select元素，加-webkit-appearance: none并手动添加自定义箭头图标，才能确保圆角完整 - 若需支持 IE11，
border-radius仍可用，但不要依赖appearance相关属性——IE11 不支持appearance
给 input 和 textarea 加 padding 后文字对齐错位怎么办
加 padding 后常见问题是文字垂直居中偏上，尤其在 input[type="text"] 中；这是因为默认 line-height 未同步调整，且不同浏览器对表单元素基线计算有差异。
- 推荐写法：
padding: 8px 12px; line-height: 1.5;，让行高略大于字体大小，兼顾多行和单行 - 对
textarea，必须显式设box-sizing: border-box，否则padding会撑大默认尺寸 - 避免只设
padding-top/padding-bottom：会导致光标位置和 placeholder 垂直偏移，各浏览器表现不一
button 和 input[type="submit"] 的 padding 行为为何不一致
原生 button 默认包含内边距（尤其是 Firefox），而 input[type="submit"] 更“裸”，直接加相同 padding 会导致高度不统一。此外，button 内部会隐式包裹内容，对 vertical-align 更敏感。
- 统一处理方案：对两者都设
padding: 0.4em 1.2em（相对单位更稳定），并加box-sizing: border-box - 禁用默认样式干扰：
border: 1px solid #ccc; background-color: #fff;显式声明，避免浏览器 UA 样式覆盖 - 若用图标+文字按钮，
button比input[type="submit"]更易控制子元素布局（比如内嵌）
圆角 + 内边距组合下，focus 状态的 outline 怎么不破坏视觉节奏
默认 :focus 的蓝色 outline 是矩形，套在已设 border-radius 的元素上会显得突兀，甚至被截断。单纯用 outline: none 会损害可访问性。
立即学习“前端免费学习笔记（深入）”；
- 推荐替代方案：
outline: 2px solid #007bff; outline-offset: 2px;，outline-offset让轮廓外扩，避开圆角边缘 - 更优解是改用
box-shadow模拟 focus 效果：box-shadow: 0 0 0 3px rgba(0, 123, 191, 0.25);，它天然遵循border-radius - 务必保留键盘 tab 导航的 focus 样式，不能只为美观隐藏——这是 WCAG 2.1 AA 级要求
select 在移动端的渲染逻辑：iOS Safari 会强制使用系统原生下拉控件，此时 border-radius 和 padding 几乎无效，只能靠包裹容器做视觉补偿。 
