Question

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

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

谢谢你的到来。

Answer 1

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

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

请注意，height:属性不适用于Firefox 3.6;您可以使用font-size:来扩大高度。

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

Answer 2

你不能直接设置文件输入的样式，但你确实可以给它一些虚假的样式和/或使它看不见但仍然可以点击。在Quirksmode上有一篇关于如何执行此操作的文章。

Answer 3

众所周知，<input type="file" />控件很难设计。

Here some articles可以提供帮助。

Answer 4

还有some nice libraries用于样式化难以处理的表单元素。 Uniform非常适合选择和上传字段。

Answer 5

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

你可以做的是隐藏文件输入并显示另一个元素，如div或其他输入接受样式，如按钮类型输入作为文件输入和触发触发器点击并提交（按下输入）事件隐藏的实际文件输入

代码示例：

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

所以回答你的问题是：不，不幸的是你无法设置文件输入按钮！

如何应用CSS浏览按钮

5 个答案: