样式 <input type="file">
IT技术
javascript
css
webforms
input
2021-01-14 12:20:39
5个回答
CSS 方式（基本代码在这里找到）：
<html>
<style type="text/css">
div.fileinputs {
position: relative;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
div.fakefile input[type=button] {
/* enough width to completely overlap the real hidden file control */
cursor: pointer;
width: 148px;
}
div.fileinputs input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
</style>
<div class="fileinputs">
<input type="file" class="file" />
<div class="fakefile">
<input type="button" value="Select file" />
</div>
</div>
</html>
没有简单的跨浏览器方式来设置文件的输入类型。因此存在甚至使用javascript的解决方案。
这是一个 jQuery 插件，您可以使用它以跨浏览器的方式设置文件类型的样式：
浏览器不允许您设置文件输入的样式。文件样式插件修复了这个问题。它使您能够将图像用作浏览按钮。您还可以使用 css 将文件名字段设置为普通文本字段。它是使用 JavaScript 和 jQuery 编写的。
也发布在流行的 ajaxian.com 上，你也可以看看这个：
Shaun Inman 有一个可爱的小技巧，可以让您使用 CSS 和 DOM 来设置文件输入的样式。
众所周知，这些元素处理起来很痛苦，现在我们选择了在 IE 上运行良好的盒装，我们需要一些其他的东西来修复 :)
我编写了这个 jQuery 插件，使文件输入的样式变得更加简单。使用 CSS 和“假元素”来获得你想要的结果。
http://github.com/jstnjns/jquery-file
希望有帮助！
<label for="file" style="/* style this one, as you want */">Upload file</label>
<input id="file" name="file" type="file" style="display:none;">
一些浏览器需要文件输入可见并手动单击浏览按钮，否则它不会向服务器提交任何内容。所以我建议 Saefraz 的第一个解决方案：用于 jQuery 的文件样式插件
其它你可能感兴趣的问题