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

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 上使用 jQuery

click()

来模拟输入上的点击。

注意： 我使用

split('\\')

来转义

\

，因为它用在从文件选择器返回的 fakepath 中。

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>

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

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

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

Answer 5

在寻找一个简单的 CSS 解决方案时发现了这个。只需在链接的 css 文件中使用以下代码即可：

input[type=file]::file-selector-button {
    visibility: hidden;
}

归功于 Nikita Hlopov，https://nikitahl.com/custom-styled-input-type-file

Answer 6

在你的CSS中：

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

!important 不是必需的。