自定义<input type =“”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，因为您无法在其中应用任何样式或自定义文本。您需要将可见内容放在其下面