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

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

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

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

Answer 3

这是浏览器的默认行为。如果仍然要更改此设置，也可以执行此操作。请参阅from this link

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

3 个答案: