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

【问题标题】：How to hide default choose file button如何隐藏默认选择文件按钮
【发布时间】：2015-01-09 18:52:25
【问题描述】：

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

这是我的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 上的所有解决方案

【问题讨论】：

标签： css twitter-bootstrap-3

【解决方案1】：

在你的 CSS 中：

 input[type="file"] {
    display: none !important;

!important 不是必需的。

【讨论】：

【解决方案2】：

2021 年更新

你可以使用

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

我找到了另一种解决方案，即使在非 WebKit 浏览器中也可以使用

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

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

【讨论】：

正是我想要的……非常感谢！
我正在寻找完全相同的效果。不过，我想知道，非 Webkit 浏览器会发生什么？
@Vladyn 感谢您的提问，我刚刚编辑了答案并添加了跨浏览器解决方案。
注意，这个解决方案隐藏了 Safari 上的整个输入。这个要点应该适用于所有现代浏览器：gist.github.com/perrygovier/3193ba18b63079ff2615d6b263c077f5

【解决方案3】：

简单。给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>

【讨论】：

【解决方案4】：

通过 Stackoverflow 和其他教程寻找几个答案，我最终做了这段代码：

$('#selectedFile').change(function () {
    var a = $('#selectedFile').val().toString().split('\\');
    $('#fakeInput').val(a[a.length -1]);
});

input#fakeInput {
  width: 100%;
  background-color: #f8f8f8;
  border-radius: 8px;
  display:block;
  padding: 11px 0;
  box-sizing: border-box;
  border:initial;
  height: 3em;
}
#buttonImage {
  float: right;
  position: absolute;
  right: 0;
  top: 0;
  background: #02a39c;
  padding:10px;
  color: white;
  font-weight: bold;
  border-radius: 0px 8px 8px 0px;
  height:1.25em;
}
#fakeDiv {
  width: 500px;
  position: relative;
  display: inline-block;
}
#selectedFile {
  opacity:0;
  position:absolute;
  left: 0;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="fakeDiv">
  <input type="file" id="selectedFile" />
  <input type="text" id="fakeInput" />
  <span onclick="document.getElementById('selectedFile').click();" id="buttonImage" >Browse</span>
</div>

基本上，您必须以一种棘手的方式进行操作。

创建一个input type="file"，使其不可见（使用 opacity 或 visibility 属性，如果设置 display=none，它将不起作用）。
输入常规输入并根据需要设置格式
放一个假按钮（在我的例子中是一个跨度）
使按钮单击以启动 input type="file" 单击
只需将您上传的内容填充到不可见的输入文件中即可

注意：如果代码 sn-p 不起作用（我第一次发布代码 sn-p）请尝试 this JsFiddle。

【讨论】：

【解决方案5】：

这就是你可能要找的东西

FIDDLE

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

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

【讨论】：

这不显示所选文件的名称