safari中直接写input样式常失效，因webkit对date/number等控件有强ua控制：appearance: none会禁用原生弹窗；需针对伪元素操作（如::-webkit-calendar-picker-indicator）并分浏览器重置微调按钮，且须确保font-size≥16px防自动缩放。
为什么直接写 input 样式总在 Safari 里失效
因为 Safari（WebKit）对 input[type="date"]、input[type="number"] 这类控件有强 UA 控制，appearance: none 一加，原生弹窗就直接禁用——这不是 bug，是 WebKit 的设计限制。Chrome 和 Firefox 虽也需前缀覆盖，但至少不破坏功能。
实操建议：
- 别对
input[type="date"]直接设padding或font-size：Safari 会忽略，且可能触发不可预测的布局塌陷 - 如必须隐藏 Safari 的日期下拉箭头，只对伪元素操作：
input[type="date"]::-webkit-calendar-picker-indicator { display: none; }，再用 JS 绑定点击事件模拟弹出 - 对
input[type="number"]，Chrome/Firefox/Safari 的微调按钮结构完全不同，必须分写：input[type="number"]::-webkit-outer-spin-button、input[type="number"]::-moz-number-spin-box等，不能只靠appearance: none
input 在 iOS 上点一下页面就放大，怎么拦
iOS Safari 有个硬规则：只要聚焦的 input 或 textarea 的计算字号 ，就会自动缩放整个 viewport 以方便输入。这不是 bug，是强制可访问性策略。
实操建议：
- 所有表单控件显式声明
font-size: 16px或更大，包括select、textarea、input - 避免用
rem或em计算后落到 16px 以下，比如html { font-size: 62.5%; }+input { font-size: 1.4rem; }在某些缩放设置下可能低于阈值 - 不要依赖
viewport的user-scalable=no拦截——iOS 10+ 已无视该指令，且损害可访问性
placeholder 兼容低版本 IE 和 Firefox 的坑
IE9–10 不支持 placeholder 属性，Firefox 虽支持，但在 input[type="password"] 中 placeholder 文字默认是灰色且无法被 ::placeholder 伪类覆盖（直到 FF100+ 才修复）。
实操建议：
- 检测支持性用
'placeholder' in document.createElement('input')，别用 UA 字符串判断 - 对不支持的浏览器，用 JS 模拟：聚焦时清空 placeholder 值，失焦且为空时还原，并加
placeholderclass 控制颜色 - CSS 中统一写三套伪类，覆盖主流引擎：
::placeholder、::-webkit-input-placeholder、::-moz-placeholder（注意 Firefox 的:-moz-placeholder已废弃）
normalize.css 后为什么 input 还是长得不一样
normalize.css 只校准默认态（default state），不碰交互态（:focus、:hover）、不处理控件内部结构（如密码框的小眼睛、数字框的箭头）、也不管平台特有行为（如 iOS 自动缩放）。它让 input 都继承 font-family 和 box-sizing，但不会让 Chrome 的 date picker 和 Safari 的长得一样。
实操建议：
- 把
normalize.css放在所有自定义 CSS 之前，且绝不和reset.css混用——后者会干掉语义样式，比如让<h1></h1>变成无 margin 无加粗 - 后续补一层“修复 CSS”，例如统一
outline：用box-shadow: 0 0 0 2px #007aff替代原生 focus ring，既可控又保可访问性 - 对
input[type="file"]这种几乎无法样式化的控件，放弃直接覆盖，改用label包裹 +display: none隐藏原生 input，再自定义按钮和文件名显示逻辑
input[type="date"] 在 Firefox 里压根没日历，Safari 又锁死样式——这时候换 flatpickr 或自建弹层，往往比修 CSS 更省时间。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
