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>

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

我根本无法摆脱灰色＆＃34;选择文件＆＃34;按钮。任何帮助表示赞赏。

我已尝试过StackOverflow上的所有解决方案

Answer 1

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

2021 年更新

你可以使用

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

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

定位整个 display:none

Answer 3

以下是您可能正在寻找的内容

FIDDLE

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

注意：我使用split('\\')来转义\，因为它是在文件选择器返回的伪路径中使用的。

Answer 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>

基本上，你必须以一种棘手的方式做到这一点。

创建输入类型=“文件”，使其不可见（具有不透明度或可见性属性，如果设置display = none，则无效）。
根据需要定期输入并格式化
放一个假按钮（在我的情况下是一个跨度）
点击按钮启动输入类型=“文件”点击
只需使用不可见的输入文件

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

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

4 个答案: