默认无水波纹因其是不可样式化的隐藏元素，:active不生效；水波纹须绑定在label/button等可见容器上，用css变量+transform实现，并注意safari兼容性。
为什么 <input type="file"> 默认没有水波纹反馈
因为原生 <input type="file"> 是不可直接样式化的内容替换元素，浏览器会隐藏它、用 label 或 JS 模拟触发；:active 伪类在它身上基本不生效——既无法聚焦（除非加 tabindex="0"），又不响应点击坐标，更不会触发 ::after 动画。你看到的“按钮”大概率是包裹它的 <label></label> 或自定义 <button></button>，水波纹必须作用在这个可见容器上，而不是 input 本身。
给文件上传按钮加水波纹的正确绑定位置
水波纹逻辑必须绑定在**用户实际点击的 DOM 元素**上，通常是：<label></label>（for 关联 input）、<button></button>（JS 触发 click()）、或带 role="button" 的 <div>。关键点：<ul>
<li>
<code><input type="file"> 本身要设 position: absolute; opacity: 0; pointer-events: none;，彻底隐身但保留功能
<label></label>）必须设 position: relative; overflow: hidden;，否则波纹会溢出<button></button> 触发，需在 onclick 里调 fileInput.click()，并阻止默认行为（避免表单提交）touchstart，且该容器要加 touch-action: manipulation;
JS + CSS 实现点击位置精准波纹的关键代码片段
不要动态插入 <span></span>，用 CSS 自定义属性更轻量。核心是把点击坐标转成相对值，再由 ::after 读取：
button::after {
content: "";
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
transform: translate(var(--x), var(--y)) scale(0);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s;
pointer-events: none;
}
<p>button:active::after {
transform: translate(var(--x), var(--y)) scale(3);
opacity: 0;
}</p>
JS 部分只需在点击时计算并设置变量：
button.addEventListener('click', (e) => {
const rect = button.getBoundingClientRect();
const x = e.clientX - rect.left - rect.width / 2;
const y = e.clientY - rect.top - rect.height / 2;
button.style.setProperty('--x', `${x}px`);
button.style.setProperty('--y', `${y}px`);
});
注意：移动端要用 e.touches[0].clientX 替代 e.clientX，且每次点击前先清空旧值：button.style.removeProperty('--x')。
容易被忽略的 Safari 和 iOS 兼容性坑
Safari 对 :active 在非可聚焦元素上支持极差，哪怕加了 tabindex="0"，也常因 touch-action 缺失导致波纹延迟或不触发：
-
touch-action: manipulation必须写在按钮自身上，父容器无效 - 若按钮是
<label></label>，需确保它有for属性且对应inputID 存在，否则 Safari 可能拒绝激活状态 - 必须加
-webkit-tap-highlight-color: transparent;，否则 iOS 会覆盖波纹效果 - 动画中避免使用
width/height过渡，只用transform和opacity，否则 Safari 重排掉帧
最稳方案是放弃 :active，改用 JS 添加临时类名（如 is-rippling），并在 setTimeout 中移除——这样能绕过所有浏览器对 :active 的奇怪限制。
