样式 <input type="file"> [重复]
Posted
技术标签:
【中文标题】样式 <input type="file"> [重复]【英文标题】：Styling <input type="file"> [duplicate] 【发布时间】：2011-05-30 18:49:06 【问题描述】：可能重复：Styling an input type=“file” button
我正在尝试样式
<input type="file">
但我运气不佳。我想让文本框消失，只保留按钮。我该怎么做？
【问题讨论】：
看到这个答案 - ***.com/a/9546968/21579 【参考方案1】：CSS方式（基本代码找到here）：
<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>
【讨论】：
只有 CSS 并不能在所有浏览器中使用 :( 最好只使用 css 伪元素作为 :before 或 :after 以及它们的样式。【参考方案2】：没有简单的跨浏览器方式来设置文件输入类型的样式。因此，存在甚至使用 javascript 的解决方案。
这是一个 jQuery 插件，您可以使用它以跨浏览器的方式设置文件类型的样式：
File Style Plugin for jQuery浏览器不允许你设置文件样式 输入。文件样式插件解决了这个问题 问题。它使您能够使用图像 作为浏览按钮。你也可以风格 文件名字段作为普通文本字段 使用 CSS。它是用 JavaScript 和 jQuery。
You can check out the demo here
也发布在流行的 ajaxian.com 上，你也可以看看这个：
A Cheaky Way to Style an input type=”file”Shaun Inman 有一个可爱的小宝贝 允许您设置文件样式的 hack 使用 CSS 和 DOM 输入。
这些元素是出了名的痛苦 处理，现在我们有选择 盒装在 IE 上玩得很好，我们需要 其他需要解决的问题:)
【讨论】：
【参考方案3】：我编写了这个 jQuery 插件来简化文件输入的样式。使用 CSS 和“假元素”来获得你想要的结果。
http://github.com/jstnjns/jquery-file
希望有帮助！
【讨论】：
以及如何解决问题。我的更好，最重要的是工作。 royalsofts.moon.pk/careers.php点击浏览按钮 我认为没有人试图变得“更好”。但是，使用我构建的 jQuery 插件，您可以在选择后看到文件的名称，以及设置文本输入和按钮的样式（不仅仅是按钮，如您的示例中所示）。 我知道你说过你想去掉文本框，但这是一个巨大的可用性缺陷。无论如何，你可以用我的例子用 CSS 隐藏它。 链接github.com/jstnjns/jquery-file【参考方案4】：<label for="file" style="/* style this one, as you want */">Upload file</label>
<input id="file" name="file" type="file" style="display:none;">
【讨论】：
我试试这个恐怕不行；当您尝试单击“上传文件”时没有任何反应。 这种方法在 Safari 和 Chrome 中运行良好（在其他地方未经测试）...最好将cursor: pointer; CSS 添加到标签中。
因为***.com/questions/7742278/…而无法在firefox上工作
你确定这行得通吗？我正在用铬尝试它。最初它显示自定义按钮，但一旦我点击选择文件，它就会恢复到默认状态【参考方案5】：
某些浏览器需要文件输入可见并手动单击浏览按钮，否则它不会向服务器提交任何内容。所以我建议 Saefraz 的第一个解决方案：用于 jQuery 的文件样式插件
【讨论】：
以上是关于样式 <input type="file"> [重复]的主要内容，如果未能解决你的问题，请参考以下文章