不能直接给 input[type="file"] 加 background 或 border-radius，因为浏览器对其样式控制极强，多数 css 属性被忽略或失效；强行覆盖易导致点击错位、移动端唤不起选择器，ios safari 中甚至无响应。
为什么不能直接给 input[type="file"] 加 background 或 border-radius？
浏览器对 input[type="file"] 的样式控制极强，绝大多数 CSS 属性（如 background、padding、border-radius、font-size）在 Chrome/Firefox/Safari 中均被忽略或部分失效。强行覆盖容易导致点击区域错位、移动端唤不起选择器，甚至在 iOS Safari 中完全无响应。
用 label 关联 + 绝对定位隐藏是最稳方案
核心是保留原生 input 的可交互性，只做视觉隐藏。推荐结构与写法：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
input必须是label的直接子元素（或通过for属性绑定 ID），否则点击无法透传 -
input用position: absolute; left: -9999px;移出视口，而非display: none或visibility: hidden——后者会让input.click()在 Safari 失效，也破坏屏幕阅读器支持 -
label可任意加 class、hover、transition，完全自由定制样式 - 基础 HTML 示例：
<label class="custom-upload-btn"><input type="file" accept="image/*">上传图片</label>
opacity: 0 配合 position: absolute 能用，但要防坑
部分人喜欢用 opacity: 0 隐藏，但它在 Chrome 90+ / Safari 15.4+ / 辅助功能开启时可能静默失败——不是报错，而是点了没反应。必须同时满足：
-
input不能设display: none，也不能设z-index: -1或父容器overflow: hidden（会意外截断点击区域） - 显式声明
pointer-events: auto（虽然默认就是，但避免继承干扰） - 尺寸不能为
0x0：至少设width: 1px; height: 1px;，某些 Android WebView 对零尺寸不响应 - 若用 JS 触发
.click()，需先检查input.disabled === false，并在 iOS 上补一句input.focus()提升可靠性
动态生成的上传按钮怎么绑定？别漏事件委托
表格行内按钮、弹窗里新增的上传控件，往往 DOM 是后加的。如果直接 $('label').on('click', ...)，新节点不会响应。正确做法：
- 用事件委托：
$(document).on('click', '.custom-upload-btn', function() { $(this).find('input[type="file"]').click(); }) - 确保每个
input有唯一id（如果用for），或确保label内始终只有一个input子元素 - 如果上传逻辑依赖
change回调更新文件名，也要用委托监听：$(document).on('change', 'input[type="file"]', handler)
label 和 input 的嵌套关系必须严格成立。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
