html - 自定义<输入类型=“file”>？

Question

我需要在我的表单中添加一些自定义的 <input type=“file”>

我尝试使用这段代码

<div id="upload-file-container">
    <input type="file" name="pic[]" class="photo" value="Add photo" />
</div>

CSS

#upload-file-container { 
position: relative; 
width: 50px; 
height: 20px; 
overflow: hidden; 
} 

#upload-file-container input  { 
position: absolute; 
left: 0; 
top: 0; 
font-size: 20px; 
opacity: 0; 
margin: 0; 
padding: 0; 
border: none; 
width: 50px; 
height: 20px; 
}

但我的输入变得不可见了。
http://jsfiddle.net/FXTCg/4/
如何使输入标题“添加照片”可见？

Answer 1

看看这个:http://jsfiddle.net/gabrieleromanato/mxq9R/ .您的输入需要不可见 opacity: 0 因为您不能在其中应用任何样式或自定义文本。你需要把你可见的内容放在它下面