如何将 CSS 应用于浏览按钮答案

【问题标题】：How apply CSS to browse button如何将 CSS 应用于浏览按钮
【发布时间】：2011-09-13 01:26:36
【问题描述】：

我在我的网页中使用<input type="file" />。对于按钮和其他控件，我有不同的 CSS 类。但是我无法添加任何类，样式来浏览由于上述标签而出现的按钮。

有没有办法改变它的默认外观？

先谢谢了。

【问题讨论】：

不能为那个按钮应用 CSS 类吗？
如何向该按钮添加类？实际上该按钮是在浏览器上动态生成的。

标签： html css

【解决方案1】：

你不能那样做。您只能将样式应用于整个 <input />。

您可以使用opacity: 0 CSS hacks 将其替换为您最喜欢的图像和图像：悬停。

请记住，height: 属性不适用于 Firefox 3.6；您可以改用font-size: 放大高度。

我做了一个例子：http://timc.idv.tw/html5-file-upload/；检查第二个演示的 CSS。

【讨论】：

【解决方案2】：

您不能直接设置文件输入的样式，但您确实可以给它一些假样式和/或使其不可见但仍可点击。在Quirksmode 有一篇关于如何做到这一点的文章。

【讨论】：

【解决方案3】：

<input type="file" /> 控件的样式是出了名的难。

Here 是 some articles 可以提供帮助。

【讨论】：

【解决方案4】：

还有some nice libraries 用于设计难以皮肤的表单元素。 Uniform 非常适合选择和上传字段。

【讨论】：

【解决方案5】：

您不能使用 CSS 设置文件输入按钮的样式。这不是您无法设置样式的唯一元素。其他一些输入不接受样式。查看此fiddle 以查看多种类型的输入。根据您的浏览器，某些输入呈现不同。范围输入或日期输入等输入正在使用 CSS 无法编辑的操作系统级 UI。

您可以做的是隐藏文件输入并显示另一个元素（如 div）或另一个接受样式的输入（如按钮类型输入）作为文件输入并触发触发器单击并在隐藏的实际文件上提交（按 Enter）事件输入。

代码示例：

HTML

<input type="file" />
<label>Select file to upload: <input type="button" /></label>

CSS

input[type="file"]{visibility:hidden; width:0;}

JavaScript：

var fileInput = document.querySelectorAll('input[type="file"]')[0],
    fakeFileInput = document.querySelectorAll('label')[0],
    clickEvent = document.createEvent('MouseEvent');
clickEvent.initMouseEvent('click',true,true,document.defaultView,1,0,0,0,0,false,false,false,false,0,null);

fakeFileInput.addEventListener('click', function(event){
   fileInput.dispatchEvent(clickEvent);
}, false);

看fiddle in action

所以你的问题的答案是：不，你不能设置文件输入 BUTTON 的样式！

【讨论】：

浏览器在 Firefox 上打不开，只是第一次在 Chrome 上工作。