隐藏输入类型=文件上的浏览按钮答案

【问题标题】：Hide the browse button on a input type=file隐藏输入类型=文件上的浏览按钮
【发布时间】：2011-06-16 18:01:57
【问题描述】：

有没有办法隐藏浏览按钮，只留下适用于所有浏览器的文本框？

我尝试过设置边距，但它们在每个浏览器中显示不同

【问题讨论】：

我在这里回答了类似的问题：stackoverflow.com/a/37183065/882337

标签： html css

【解决方案1】：

不，你可以做的是一个（丑陋的）解决方法，但被广泛使用

创建普通输入和图像
创建不透明度为 0 的文件输入
当用户点击图片时，你模拟点击文件输入
当文件输入改变时，你将它的值传递给普通输入（这样用户可以看到路径）

在这里您可以看到完整的解释以及代码：

http://www.quirksmode.org/dom/inputfile.html

【讨论】：

我认为浏览器将来可能会出于安全考虑禁止这样做。
我不明白为什么这代表了这样一种享受，要被删除。另外，如果浏览器现在禁止这样做，它会破坏很多页面。

【解决方案2】：

您可以不隐藏元素，只需将其不透明度设为 0 即可使其透明。

隐藏输入文件会使其停止工作。所以不要那样做..

Here你可以找到一个透明浏览操作的例子；

【讨论】：

呃，和上面的答案是同一个链接。
我不明白您所说的“隐藏”是什么意思，请说明您认为输入何时停止工作。这听起来很奇怪，因为当您将标签元素链接到输入时，只要它与标签保持链接，您对输入所做的操作基本上就不再重要了。

【解决方案3】：

        .dropZoneOverlay, .FileUpload {
            width: 283px;
            height: 71px;
        }

        .dropZoneOverlay {
            border: dotted 1px;
            font-family: cursive;
            color: #7066fb;
            position: absolute;
            top: 0px;
            text-align: center;
        }

        .FileUpload {
            opacity: 0;
            position: relative;
            z-index: 1;
        }

        <div class="dropZoneContainer">
            <input type="file" id="drop_zone" class="FileUpload" accept=".jpg,.png,.gif" onchange="handleFileSelect(this) " />
            <div class="dropZoneOverlay">Drag and drop your image <br />or<br />Click to add</div>
        </div>

我在Remove browse button from input=file 找到了实现这一目标的好方法。

此解决方案背后的基本原理是，它创建了一个透明的 input=file 控件，并在文件控件下方创建了一个对用户可见的层。 input=file 的 z-index 将高于图层。

这样看来，图层就是文件控件本身。但实际上当你点击它的时候，input=file就是点击了，会出现选择文件的对话框。

【讨论】：

技术这是最好的方法。我猜是最少的复杂性和最少的努力。
喜欢这个答案，对我帮助很大。无需实现额外的 JS。

【解决方案4】：

以下代码对于隐藏默认浏览按钮并改用自定义非常有用：

(function($) {
  $('input[type="file"]').bind('change', function() {
    $("#img_text").html($('input[type="file"]').val());
  });
})(jQuery)

.file-input-wrapper {
  height: 30px;
  margin: 2px;
  overflow: hidden;
  position: relative;
  width: 118px;
  background-color: #fff;
  cursor: pointer;
}

.file-input-wrapper>input[type="file"] {
  font-size: 40px;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  cursor: pointer;
}

.file-input-wrapper>.btn-file-input {
  background-color: #494949;
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  height: 34px;
  margin: 0 0 0 -1px;
  padding-left: 0;
  width: 121px;
  cursor: pointer;
}

.file-input-wrapper:hover>.btn-file-input {
  //background-color: #494949;
}

#img_text {
  float: right;
  margin-right: -80px;
  margin-top: -14px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="file-input-wrapper">
    <button class="btn-file-input">SELECT FILES</button>
    <input type="file" name="image" id="image" value="" />
  </div>
  <span id="img_text"></span>
</body>

【讨论】：

【解决方案5】：

遇到这个问题，感觉没有任何答案是干净的。这是我的解决方案：

<label>
  <span>Select file</span>
  <input type="file" style="display: none">
</label>

当您单击标签时，选择文件对话框将打开。无需 js 即可实现。

您可以设置标签的样式，使其看起来像一个按钮。

这是一个使用 w3css 和 font awesome 的示例：

<label class="w3-button w3-blue w3-round">
    <span><i class="fas fa-image"></i></span>
    <input type="file" style="display: none" >
</label>

当然你需要在输入中添加一个事件监听器来检测文件是否被选中。

【讨论】：

【解决方案6】：

所以我发现这个解决方案很容易实现，并且提供了一个非常干净的 GUI

把它放到你的 HTML 中

<label class="att-each"><input type="file"></label>

这在你的 CSS 中

label.att-each {
width: 68px;
height: 68px;
background: url("add-file.png") no-repeat;
text-indent: -9999px;
}

add-file.png 可以是您希望在网页上显示的任何图形。单击图形将启动默认文件资源管理器。

工作示例：http://www.projectnaija.com/file-picker17.html

【讨论】：

【解决方案7】：

HTML - InputFile 组件可以通过编写一些 css 来隐藏。在这里，我添加了一个覆盖 inputfile 组件的图标。

<label class="custom-file-upload">
    <InputFile OnChange="HandleFileSelected" />
    <i class="fa fa-cloud-upload"></i> Upload
</label>

css-

<style>
    input[type="file"] {
        display: none;
    }

    .custom-file-upload {
        border: 1px solid #ccc;
        display: inline-block;
        padding: 6px 12px;
        cursor: pointer;
    }
</style>

【讨论】：

【解决方案8】：

这里只是一个避免过多 JavaScript 的附加提示：如果您添加一个标签并将其设置为您想要的“浏览按钮”，您可以将其放置在浏览器提供的真正浏览按钮上或隐藏该按钮不知何故不同。通过单击标签，浏览器的行为是打开对话框以浏览文件（不要忘记在标签上添加“for”属性，并使用文件输入字段的 id 值来实现这一点）。这样，您几乎可以以任何您想要的方式自定义按钮。

在某些情况下，可能需要添加第二个输入字段或文本元素以显示文件输入的值并完全隐藏输入，如其他答案中所述。仍然标签会避免模拟 JavaScript 对文本输入按钮的点击。

顺便说一句，类似的 hack 可用于自定义复选框或单选按钮。通过为它们添加标签，单击标签会导致选择复选框/单选按钮。然后可以隐藏本机复选框/单选按钮并由自定义元素替换。

【讨论】：

【解决方案9】：

奇怪的是，这对我有用（当我放在按钮标签内时）。

.button {
    position: relative;

    input[type=file] {
            color: transparent;
            background-color: transparent;
            position: absolute;
            left: 0;
            width: 100%;
            height: 100%;
            top: 0;
            opacity: 0;
            z-index: 100;
        }
}

仅在 Chrome (macOS Sierra) 中测试。

【讨论】：

【解决方案10】：

只需像这样添加负面文本意图：

input[type=file] {
  text-indent: -120px;
}

之前：

之后：

【讨论】：

您好，此解决方案不适用于所有语言，因为该按钮取决于浏览器中选择的语言
是的。我完全同意你的看法。除了不稳定之外，这个解决方案实施起来非常简单和快速。因此我用过一次，我可以想象某些用例。我将不胜感激编辑这个答案，解释这种方法的所有问题。

【解决方案11】：

最好的办法

<input type="file" id="file">
<label for="file" class="file-trigger">Click Me</label>

你可以为你的“标签”元素设置样式

#file { 
   display: none;
}
.file-trigger {
/* your style */
}

【讨论】：