如何从文本框中删除"选择文件"按钮?

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

在这里，您可以做的是从输入文件中删除类并将其添加到标签中，然后将"隐藏"或"显示：无"属性添加到文件输入中

<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;
}