CSS：文件输入 - 定位显示“未选择文件”的文本

【问题标题】：CSS: File Input - target the text that says "no file chosen"CSS：文件输入 - 定位显示“未选择文件”的文本
【发布时间】：2013-10-30 19:50:20
【问题描述】：

我有一个使用 Bootstrap 3 的表单。我想要一个比浏览器默认样式更好的文件输入。

如何定位显示“未选择文件”的文本？我想垂直居中。

【问题讨论】：

如果您投票结束，请留言说明原因：）谢谢

标签： html forms css twitter-bootstrap

【解决方案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);
 });
});

【讨论】：