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);
 });
});