如何在FireFox中使用纯CSS设计HTML文件上传按钮

我尝试了许多不同的技术来设计

input[type=“button”]

的样式，它位于

input[type=“file”]

中

我发现了一种使用纯

CSS

的技术，它允许用户查看他们选择的文件名。然而，它遗漏了一款特别流行的浏览器，firefox

通过使用

JS

或直接隐藏文件名的输出框，我找到了几种“实现”这一点的方法

指向JS或隐藏方法的链接：

我在chrome中完全无意中发现了纯CSS方法，后来又在

此

CSS

方法通过其

pseudo

类选择元素来工作

在Google Chrome中，这是通过以下方式完成的：

input.formelement:：-webkit文件上传按钮{背景色：#443}

其中，

input.formelement

是我的文件上传表单的类，

-webkit file upload button

是特定于浏览器的伪元素

在Internet Explorer（10+）中，这是通过以下方式完成的：

input.formelement:：-ms浏览{背景色：#443}

同样，

input.formelement

是我的文件上传表单的类，

-ms browse

是特定于浏览器的伪元素

---

在没有Javascript的FireFox中，有什么方法可以做到这一点吗？

我不相信在FireFox中，只有使用CSS才能做到这一点

也无法设置或更改“未选择文件”文本的样式。该文件名标签在各种浏览器中的显示方式也不同

如果你真的想要一个跨浏览器的解决方案，你最好的选择仍然是使用一个假“按钮”，触发点击实际隐藏的按钮。使用JS可能是显而易见的选择，但不是唯一的方法：

JS方法：

//JS-DOM元素
var browse_button=document.getElementById（'browse-button'）；
var file_input=document.getElementById（'file-input'）；
//处理程序触发单击文件输入
浏览按钮。addEventListener（'click'，函数（e）{
文件输入。单击（）；
});
/*用于隐藏文件输入的CSS*/
#文件输入{
显示：无；
}
#浏览按钮{
/*待办事项：风格*/
}

浏览
我找到了一种方法来做我需要的事情，但无法为最终用户完成。FireFox使用用户代理样式表，但与其他浏览器不同，它不能被覆盖。经过一番挖掘，我发现：尽管有一个用户代理样式表能够更改阴影dom对象，但Mozilla似乎走上了最容易的道路。据我所知，您不能更改用户代理样式表。那么，您是如何“为最终用户而不是为最终用户”这样做的呢？我不太明白你的意思。我做了一件简单快捷的事情，将
input[type=“file”]>input[type=“button”]
的按钮光标从默认设置更改为我的自定义点击标记光标。我通过编辑omni.ja中的forms.css实现了这一点，在下面的屏幕截图中，可以从我的一台服务器下载它。（如果你想测试自己。只需备份你的omni.ja并将我的粘贴到位，然后重新启动FireFox并用按钮导航到一个站点。）@light：你能提供更多关于使用按钮元素触发点击隐藏输入元素的详细信息吗？@DavidRTribble在回答中添加了JS方法的代码示例。