浏览器故意忽略input[type="file"]的css样式是出于安全限制，防止恶意覆盖诱导点击；安全隐藏需用position: absolute; left: -9999px保持可交互性，禁用display: none或visibility: hidden，推荐label关联触发。
为什么直接给 input[type="file"] 写 CSS 没反应
不是你写错了，是浏览器故意不认。几乎所有视觉样式（background、border-radius、font-size、padding）都会被忽略——这是安全限制，防止恶意覆盖诱导点击。你写 input[type="file"] { background: red; }，页面毫无变化，正常。
怎么安全隐藏原生按钮并透传点击
核心原则：保持 input[type="file"] 可交互，只让它“看不见”，别让它“不存在”或“不可点”。
- ✅ 推荐做法：
position: absolute; left: -9999px;—— 兼容所有主流浏览器，包括 iOS 17+ 和旧版 Android WebView - ❌ 避免
display: none或visibility: hidden—— Safari 和部分 WebView 下.click()会静默失败 - ❌ 少用
opacity: 0—— 若必须用，得显式加pointer-events: auto，否则 iOS/辅助功能设备可能拒触发 - ✅ 绑定方式优先用
<label for="xxx"></label>，比 JS 调.click()更稳定；若用 JS，确保input已挂载 DOM 且未disabled
accept、multiple、required 这几个属性怎么用才不踩坑
它们看着简单，但错一个就影响体验或功能：
-
accept=".pdf,.docx"是提示性限制，用户仍可手动绕过，后端必须二次校验；不要写成accept="pdf,docx"（缺点）或accept="application/pdf"（MIME 类型兼容性差） -
multiple开启后，input.files是FileList（类数组），不能直接.map()，要用Array.from(input.files)转换 -
required在部分老浏览器（如 IE11）对input[type="file"]不生效，需配合 JS 做 fallback 校验 - 表单提交时，
name属性必须和后端约定一致，比如后端读$_FILES['avatar']，前端就得写<input type="file" name="avatar">
上传前校验和拖拽支持怎么做才稳
纯点击选文件只是基础，真实场景常要大小限制、类型过滤、拖拽支持——这些都得在 JS 层处理，且不能依赖 alert 阻断流程。
- 文件大小检查：监听
change事件，取input.files[0]?.size（单位字节），超限就清空input.value = ''并提示，别只弹 alert - 拖拽支持必须监听三个事件：
dragover（必须event.preventDefault()）、dragleave、drop；漏掉dragover，drop永远不会触发 - 拖拽进来的文件在
event.dataTransfer.files，不是event.target.files；FileList同样要转数组才能遍历 - 上传必须用
FormData构造请求体，fetch 时别手动设Content-Type，让浏览器自动加boundary，否则 400
click() 的触发时机敏感，别在 touchstart 里调，也别在动画回调里急着触发；更稳妥的是绑定原生 click 事件，或用 label 关联。还有，input.files 是只读的，想清空只能赋空字符串 input.value = ''，不能删元素重插。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
