javascript - 如何从文本框中删除“选择文件”按钮？

Question

如何隐藏文本框中的选择文件按钮，因为我正在使用另一个按钮进行浏览。

如果我给type="File"，按钮"choose file"会自动出现在我的文本框中。 下面的代码：

 <div class="col-lg-6">
    <label>Select File</label>
    <input  type="file"  id="SelectFile" @*style="display: none;"*@ class="form-control  input-sm input-small input-inline" />
</div>
 <div class="btn-group">
     <button id="btnBrowse" name="btnBrowse" onclick="document.getElementById('SelectFile').click();"  class="btn btn-block btn-primary btn-flat"><span class="hide-on-mobile">Browse </span><i class="fa fa-search"></i></button>
 </div>

带有“选择文件”按钮的图像

我尝试给*style="display: none;"*，这使我的文本框不可见。

应用样式后的图像无：

Answer 1

在这里您可以做的是从输入文件中删除类并将它们添加到您的标签中，然后将 'hidden' 或 display:none 属性添加到文件输入

 <div class="col-lg-6">
    <label class="form-control  input-sm input-small input-inline" >Select File</label>
    <input  type="file" hidden  id="SelectFile"  />
</div>

Answer 2

这是浏览器的默认行为。如果你仍然想改变它，你也可以这样做。请参考，从此链接

Answer 3

我认为您的问题是重复的； 如何从文本框中删除“选择文件”按钮？

但是，在您的 CSS 中，您可以尝试类似的方法；

#SelectFile {
  padding: 36px 0 0 0;
}