如何自定义html消息<input type =“”file“”/>?

时间:2013-03-26 15:58:43

标签: html file-upload input

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

http://www.hangar-hosting.com/descargas/01.png

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

3 个答案:

答案 0 :(得分:2)

您可以这样自定义:

<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>

答案 1 :(得分:0)

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 */
}

答案 2 :(得分:0)

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

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