统一input边框圆角需先加-webkit-appearance: none和-moz-appearance: none清除ua样式，再设border-radius；password类型尤需注意safari保留原生内边距与圆角，须配合padding、box-shadow:focus及全前缀placeholder确保跨浏览器一致。

input边框圆角不统一，特别是password类型

Chrome、Safari 对 input[type="password"] 的默认渲染不一致，比如 Safari 可能保留原生内边距和轻微圆角，导致你写的 border-radius: 6px 看似生效，实际被 UA 样式覆盖。

• 必须加 appearance: none，并补全前缀：-webkit-appearance: none 和 -moz-appearance: none
• 别只靠 border-radius，否则旧版 Safari 或 Firefox 仍可能“偷偷”画出不同弧度
• 所有 input 类型（text/password/email）用同一套基础类名统一样式，避免 selector 优先级冲突漏掉某类

:focus 状态下 outline 消不干净或阴影发虚

直接写 outline: none 多数情况能去蓝框，但某些浏览器（如 iOS Safari）在键盘弹出后会重置 focus 样式；而仅改 border-color 又容易显得单薄，box-shadow 不对齐则像“浮在框外”。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 聚焦时优先用 box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2)，比单纯加粗边框更轻量且兼容性好
• 务必配 outline: none，否则键盘操作时仍可能闪出 outline（尤其 macOS VoiceOver 场景）
• shadow 的 2px 宽度要和 border 宽度匹配，例如 border 是 1px solid #d1d5db，shadow 就别设 4px，否则视觉膨胀

placeholder 文字颜色太浅或移动端消失

::placeholder 在部分 Android WebView 或老版 Chrome 中不生效，或者文字被裁切——常见原因是父容器设置了 overflow: hidden，或字体大小用了 em 导致缩放后错位。

• 写全兼容前缀：::-webkit-input-placeholder、::-moz-placeholder、::placeholder
• 颜色别用 #ccc，WCAG 要求对比度 ≥ 4.5:1，推荐 #9aa3b1 或 hsl(210, 12%, 65%)
• 禁用 font-size: 0.875em 这类相对单位，固定写 font-size: 14px 更稳，配合 line-height: normal

padding 设不对导致文字上下偏移或光标错位

很多表单输入框文字“贴顶”或“下沉”，不是字体问题，而是 padding 和浏览器默认 line-height 冲突。input 元素不响应 line-height，垂直居中只能靠 padding 推算。

• 字体为 16px 时，推荐 padding: 10px 12px（上下 10px，左右 12px），视觉上最居中
• 别用 padding: 0.625rem 这类 rem 值——不同 root font-size 下高度浮动，移动端易失准
• 如果加了左侧图标（如邮箱 icon），padding-left 至少留足 36px，否则文字和图标重叠

真正卡住人的往往不是“怎么加圆角”，而是 Safari 下 appearance 没清干净、iOS 键盘弹起后 focus 样式回退、或者 placeholder 在安卓低版本里直接不显示——这些点不提前压住，上线后用户一换设备就露馅。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！