如何自定义html消息<input type=“file”>？答案

【问题标题】：How to customize html message <input type=“file”>?如何自定义html消息<input type=“file”>？
【发布时间】：2013-03-26 15:58:43
【问题描述】：

我正在尝试自定义已如下所示的输入类型文件的消息：

我需要垂直对齐“未选择文件”的中间并更改“选择文件”和“未选择文件”的文本

【问题讨论】：

这是您浏览器中文件输入的正常呈现，还是您已经将其替换为自定义解决方案？
看起来像一个影子王国的东西；检查w3.org/TR/shadow-dom 和html5rocks.com/en/tutorials/webcomponents/shadowdom

标签： html file-upload input

【解决方案1】：

你可以这样自定义：

<style type="text/css">
#upload-file-container input {
   filter: alpha(opacity=0);
   opacity: 0;   
}
</style>

<br />
<label>Please click the Image to Upload a file:</label>
<div id="upload-file-container">
<input type="file" name="photo" />
</div>

【讨论】：

【解决方案2】：

http://jsfiddle.net/5rp5e/2/（工作示例）

 <div id="background">
<input type="file" value="choose file" />
</div>

CSS：

#background{
    padding:20px;
    background: #ccc;
    width: 300px; /* or whatever you want it to be */
}

【讨论】：

我在这里遗漏了什么吗？这个答案有什么问题 - 它看起来就像他的形象。
@Doorknob 你一定是误读了我的代码或者搞砸了一些东西——它工作正常。我自己测试了一下。

【解决方案3】：

在 Evan 的示例中添加填充可以垂直对齐文本。文本本身正在由系统生成：

http://community.mybb.com/thread-59344.html

【讨论】：