如何隐藏默认选择文件按钮

Question

如何隐藏默认的选择文件按钮？

这是我的html：

<div class="col-md-4">                           
    <span class="btn btn-info "><i class="glyphicon glyphicon-plus"> </i> Browse
        <input type="file" style="position:relative;overflow:hidden" id="inPutArtistImage" name="ArtistImage" accept="image/png, image/jpeg" />
    </span>
</div>

该按钮的样式很好，带有引导按钮信息颜色和加号图标。

我根本无法摆脱灰色的“选择文件”按钮。任何帮助表示赞赏。

我已经在StackOverflow上尝试了所有解决方案

Answer 1

2021 年更新

您可以使用

::-webkit-file-upload-button {
   display: none;
}

我找到了另一个即使在非 WebKit 浏览器中也能工作的解决方案

::file-selector-button {
  display: none;
}

它隐藏了“选择文件”按钮，但文件名仍然可见。如果您还想隐藏文件名，只需input使用display:none

Answer 2

简单。给input足够，padding-top以便它隐藏。不要忘记做这box-sizing件事！

input#file {
  display: inline-block;
  width: 100%;
  padding: 120px 0 0 0;
  height: 100px;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url('https://cdn1.iconfinder.com/data/icons/hawcons/32/698394-icon-130-cloud-upload-512.png') center center no-repeat #e4e4e4;
  border-radius: 20px;
  background-size: 60px 60px;
}

<form>
  <input id="file" type="file" />
</form>

Answer 3

这就是您可能正在寻找的

小提琴

我在这里所做的是使用样式隐藏原始输入display: none，并在另一个 div 上使用 jQueryclick()来模拟输入的点击。

注意：我曾经使用split('\\')转义\，因为它在从文件选择器返回的 fakepath 中使用。