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

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>

Image with Choose File button

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

Image after apply style 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

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

Answer 3

我认为你的问题是重复的； How to remove “Choose File” button from the textbox?

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

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