需重置outline、appearance并清除伪元素干扰；number类型要处理自增按钮；placeholder需兼容多浏览器伪元素；移动端需防ios缩放与键盘顶起。
怎么用 CSS 控制 <input> 的默认样式
html5 的 <input> 默认带浏览器内置样式（比如 chrome 的圆角、阴影、聚焦蓝框），直接写 CSS 很容易被忽略掉两个关键点：一是 outline 在 focus 时的干扰，二是某些浏览器（如 safari）对 appearance 的强干预。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先重置
outline: none，但别只写这一条——要补上自定义:focus样式，否则可访问性出问题 - 加
-webkit-appearance: none和appearance: none，不然 Safari 死活不让你改圆角或背景色 - 如果用了
border-radius却没生效，大概率是父容器或伪元素（如::-webkit-inner-spin-button）在捣乱，得一并清掉
type=”number” 为什么光标偏移 / 输入框变窄
type="number" 在 Chrome/firefox 下会自动加增减按钮（::-webkit-inner-spin-button），它占空间、不响应 width，还可能把文字挤偏。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
::-webkit-inner-spin-button { -webkit-appearance: none; }干掉它（Firefox 不支持该伪元素，但也不显示按钮） - 如果输入框宽度异常，检查是否漏了
box-sizing: border-box——padding和border在content-box下会撑宽 - 别依赖
width: 100%直接套在type="number"上，最好包一层<div> 做尺寸控制 <h3>placeholder 颜色和透明度怎么统一改</h3> <p>各浏览器 placeholder 伪元素名不同，且默认透明度低（尤其在浅灰背景上几乎看不见），直接写 <code>color不一定生效。实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须同时写全三套：
::placeholder（标准）、::-webkit-input-placeholder（Chrome/Safari）、::-moz-placeholder（Firefox 旧版） - 如果颜色还是淡，加
opacity: 1—— Firefox 会把 placeholder 当成半透明处理，不显式设就压不住 - 避免用
!important，优先靠选择器权重解决；比如input::placeholder比::placeholder权重高
移动端 input 聚焦时页面缩放 / 键盘顶起内容
iOS Safari 在
<input>聚焦时可能触发页面缩放（尤其是viewport设置不当），或者键盘弹出后页面滚动错位、底部内容被顶飞。实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保
<meta name="viewport">包含user-scalable=no，但更稳妥的是监听focus事件临时禁用缩放（用document.body.style.zoom = "1"+touch-action: manipulation） - 键盘顶起问题本质是 viewport 高度变化，iOS 不触发
resize，得监听focusin/blur手动调整body的height或padding-bottom - 别用
position: fixed布局底部操作栏——键盘弹出会把它推到视口外，改用position: sticky或 js 动态计算
最麻烦的其实是 iOS 对
input的渲染劫持：它会在聚焦时强制拉伸整个页面来“适配”键盘高度，这个行为没法用纯 CSS 关掉，只能靠 JS 配合 viewport 动态调整。很多人卡在这一步，不是样式写错，是根本没意识到浏览器在背后偷偷改了 layout。 - 必须同时写全三套：