输入样式=文件作为按钮答案

【问题标题】：Style of input=File as a button输入样式=文件作为按钮
【发布时间】：2011-11-24 04:14:38
【问题描述】：

我正在尝试在 input=file aka uploader 中添加一些样式，但我很难使用它，是否有一些 NON FLASH 解决方案（可能是 jquery 甚至是纯 javascript）？

【问题讨论】：

不知道。我删除了它，因为它在问题的上下文中没有意义。
我只想要这个按钮，因为我有风格化的表单，并且文本框出现在 FF bot 中，而不是在 chrome 或 safari 中......它有一个行为差异，我想让它在所有浏览器中都能正常工作。

【解决方案1】：

这是可行的，但不是那么容易。您需要使用普通输入元素/按钮来模拟文件输入，并用它覆盖原始文件输入。长话短说：http://www.quirksmode.org/dom/inputfile.html 有 jQuery 插件可以解决这个问题，比如 this one。

【讨论】：

【解决方案2】：

使用 clip 属性将按钮与输入框分开，使用opacity: 0 将其隐藏，然后将其绝对定位在样式按钮上。

* > /**/ input[type="file"], x:-webkit-any-link {
  outline: none; 
  cursor: pointer; 
  position: absolute; 
  top:0; 
  clip: rect(0px 86px 22px 0px); /* Webkit; use 0px 222px 22px 145px for other browsers */
  z-index:2;
  opacity:0;
}

样式化的输入字段可以放置在样式化按钮旁边。使用事件处理程序使输入字段的显示值与所选文件名保持同步。

【讨论】：

【解决方案3】：

我不久前写了以下内容来帮助我解决这个问题。有一段时间没有更新了，如果发现错误请告诉我（只需在 GitHub 页面上创建问题即可）。

http://github.com/topherfangio/FancyFile

【讨论】：

有没有关于如何使用它的文档？
@Diego Correa - 即将推出。现在和今天下午正在处理一些错误修复和文档。

【解决方案4】：

我认为这个 Quirksmode 页面可能有你的解决方案：http://www.quirksmode.org/dom/inputfile.html

我认为 CSS 是你最好的选择。

【讨论】：

【解决方案5】：

我编写了一个名为 jfancyfile 的 jQuery 插件，旨在做到这一点。

它比其他所有解决方案都做得更多，因为它允许为按钮使用任何尺寸。

我认为必须开发的东西，因为我在网上找不到这个。

警告：尚未针对所有网络浏览器进行测试！

【讨论】：