Javascript 一个文本栏，用于替换；选择文件"；

我有以下创建表单的代码（）：

  <form class="form" method="post" action="upload.php">
    <div class="form-group email">
      <!-- <label class="sr-only" for="email">Email</label> -->
      <input name="f_email" id="email" type="email" class="form-control" placeholder="Email:">
    </div>
    <div class="form-group file">
      <!-- <label class="sr-only" for="file">File</label> -->
      <input name="file" id="file" type="file" class="form-control" placeholder="Click to choose file:">
    </div>
    <button type="submit">Upload</button>
  </form>

或

但他们都删除了

文件

行

我将添加一个onclick事件（启动文件浏览器）和一个change事件（在工具栏中显示所选的文件名），但在此之前，有人知道如何显示我上面描述的工具栏吗

此外，是否有人知道如何在同一行中显示电子邮件栏和文件栏

更新1:很高兴知道。但似乎onclick事件在该字段中被禁用。下面是一个示例：。

您可以为输入创建一个。这样，当单击标签时，它将聚焦输入。请参见下面的演示：

.fakeInput{
边框：1px实心#9199a1；
颜色：#9199a1；
填充：1px；
保证金：2倍；
字号：13.3333px；
字体系列：“Arial”；
文本转换：无；
字母间距：正常；
文本对齐：开始；
宽度：180px；
}

单击以选择文件：

这与不同吗？这是一个备选方案，但我仍然不想看到按钮，onclick事件似乎已被禁用。请查看我的更新…你想让它看起来像电子邮件（文本）输入吗？我不想看到

选择文件

按钮，我想看到一个充满

的文本栏单击选择文件：

（文本栏充满

电子邮件：

）好吧，现在如何，它使用样式模拟文本输入（可以移动到CSS）？

<input name="file" id="file" type="file" class="form-control" style="visibility: hidden; display: none;" placeholder="Click to choose file:">

<input name="file" id="file" type="file" class="form-control" style="position: relative; top: -1000px;" placeholder="Click to choose file:">