CSS：文件輸入 - 目標文本「沒有選擇文件」

Question

我有一個使用Bootstrap 3的表單。我想要一個比瀏覽器默認更好的樣式的文件輸入。

如何定位顯示「沒有選擇文件」的文本？我想垂直居中。

Answer 1

使用DIV分配給文件輸入： HTML：

<input type="file" name="the_file" style="display:none;" /> 
<div style="cursor: pointer; display: inline-block; padding:5px; background: #eeeeee;" id="file-browse" >choose file</div> 

JS/jQuery的：

$('#file-browse').click(function(){ 
$fileInput = $('input[name=the_file]'); 

var myFile; 
$fileInput.click(); 
$fileInput.change(function(e) 
{ 
    myFile = e.target.files[0]; 
    console.log(myFile); 
}); 
});