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

有没有办法隐藏浏览按钮，只留下在所有浏览器中都可以使用的文本框

我试过设置页边距，但在每个浏览器中显示的页边距都不一样。不，你可以做的是一个（难看的）解决方法，但大部分都是使用的

创建正常输入和图像

创建不透明度为0的文件输入

当用户单击图像时，您模拟单击文件输入

当文件输入更改时，您将其值传递给正常输入（以便用户可以看到路径）

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

---

在不隐藏元素的情况下，只需将其不透明度设置为0，即可使其透明

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

---

您可以找到透明浏览操作的示例

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

（函数（$）{
$（'input[type=“file”]”）。绑定（'change'，function（）{
$（“#img_text”）.html（$（'input[type=“file”]”）.val（）；
});
})（jQuery）

。文件输入包装器{
高度：30px；
保证金：2倍；
溢出：隐藏；
位置：相对位置；
宽度：118px；
背景色：#fff；
光标：指针；
}
.file输入包装器>输入[type=“file”]{
字体大小：40px；
位置：绝对位置；
排名：0；
右：0；
不透明度：0；
光标：指针；
}
.file输入包装器>.btn文件输入{
背景色：#494949；
边界半径：4px；
颜色：#fff；
显示：内联块；
高度：34px；
保证金：0-1px；
左侧填充：0；
宽度：121px；
光标：指针；
}
.file输入包装器：hover>.btn文件输入{
//背景色：#494949；
}
#img_文本{
浮动：对；
右边距：-80px；
利润上限：-14px；
}

选择文件

.dropZoneOverlay、.FileUpload{
宽度：283px；
高度：71px；
}
.dropZoneOverlay{
边框：虚线1px；
字体系列：草书；
颜色：#7066fb；
位置：绝对位置；
顶部：0px；
文本对齐：居中；
}
.文件上传{
不透明度：0；
位置：相对位置；
z指数：1；
}

拖放图像
或单击以添加

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

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

---

顺便说一句，类似的黑客可以用于定制复选框或单选按钮。通过为它们添加标签，单击标签可使其选中复选框/单选按钮。然后，本地复选框/单选按钮可以隐藏起来，并由自定义元素替换。

奇怪的是，这对我来说很有效（当我将其放置在按钮标签中时）

---

仅在Chrome（macOS Sierra）中测试

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

把这个放到你的HTML中

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

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

---

工作示例：

遇到这个问题时，觉得没有一个答案是干净的。以下是我的解决方案：

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

选择文件

单击标签时，将打开“选择文件”对话框。不需要js来实现它

可以将标签的样式设置为按钮

下面是一个使用w3css和字体的示例：

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

---

当然，您需要向输入中添加事件侦听器，以检测是否选择了文件。

只需添加负面文本意图即可：

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

之前：

之后：

最好的方法

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

---

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

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

上传

css-

输入[type=“file”]{
显示：无；
}
.自定义文件上载{
边框：1px实心#ccc；
显示：内联块；
填充：6px 12px；
光标：指针；
}

我认为，为了安全起见，浏览器可能会在将来禁止此项服务。我不明白为什么要删除此项服务会代表这样的待遇。另外，如果浏览器现在禁止，它会破坏很多页面。嗯，这和上面的答案是一样的。我不明白你说的“隐藏”是什么意思，请指定你认为输入何时停止工作。这听起来很奇怪，因为当你将一个标签元素链接到输入时，只要它与标签保持链接，你对输入做什么基本上就不再重要了。我在这里回答了一个类似的问题：这是最好的方法。我想这是最简单、最省力的。

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

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

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

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

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