隐藏input type=file中的浏览按钮

Question

隐藏input type=file中的浏览按钮

htmlcss

36

有没有一种方式可以隐藏浏览按钮并仅在所有浏览器中保留文本框？我尝试设置边距，但它们在每个浏览器中显示不同。

- josh

我在这里回答了类似的问题：https://dev59.com/dXRB5IYBdhLWcg3wn4UL#37183065 - Cezar D.

12个回答

12

你可以通过将元素的不透明度设置为0来使其透明，而不是将该元素隐藏。

将输入文件隐藏会导致它停止工作，所以不要这样做。

在这里，你可以找到一个透明的浏览操作的示例；

- Suphi ÇEVİKER

1

哦，那个链接和上面的答案一样。 - Charles Harmon

我不明白你所说的“hidden”是什么意思，请指明当你认为输入停止工作时。这听起来很奇怪，因为当你将标签元素链接到输入时，只要它与标签保持链接，那么对于输入所做的任何操作都不再重要了。 - luukvhoudt

10

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

我在这里找到了一个实现的好方法。

这种解决方案的原理是创建一个透明的input=file控件，并在文件控件下面创建一个用户可见的图层。 input=file的z-index将高于该图层。

这样，它看起来像图层本身就是文件控件。但实际上，当您点击它时，被点击的是input=file，将弹出选择文件的对话框。

- PixelsTech

2

这是最好的方法。复杂度最小，付出的努力也最少。 - Arun Prasad E S

1

喜欢这个答案，帮了我很多。不需要实现额外的JS。 - del cueto

9

以下代码非常有用，可以隐藏默认的浏览按钮并使用自定义按钮代替：

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

- vasudev

7

我看到了这个问题，感觉回答都不够简洁。以下是我的解决方案：

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

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

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

以下是使用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>

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

- Don

6

截至2022年，现代浏览器支持文件按钮伪选择器。我只遇到了Safari v16.1的问题，它没有按预期工作，需要解决按钮隐藏的问题（::-webkit-file-upload-button部分）。

input[type=file]::file-selector-button {
    display: none;
}

input[type=file]::-webkit-file-upload-button {
    display: block;
    width: 0;
    height: 0;
    margin-left: -100%;
}

input[type=file]::-ms-browse {
    display: none;
}

您也可以使用简洁的语法：

::file-selector-button {
    /* ... */
}

::-webkit-file-upload-button {
    /* ... */
}

::-ms-browse {
    /* ... */
}

- Krzysztof Przygoda

2

可以通过编写一些CSS来隐藏HTML中的InputFile组件。在这里，我添加了一个图标，覆盖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>

- Paritosh Tiwari

InputFile зїДдїґдЉЉдєОжЭ•иЗ™дЇО ASP.NET Core BlazorпЉМиАМдЄНжШѓж†ЗеЗЖзЪД HTMLгАВ - kuanyui

2

我发现了这个解决方案，它非常容易实现，并且提供了一个非常干净的图形用户界面。

将以下内容放入您的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

- Eaweb

1

如果想要避免使用太多JavaScript，可以添加一个标签并将其样式设置为所需的“浏览按钮”，然后将其放置在浏览器提供的实际浏览按钮上或以其他方式隐藏该按钮。点击标签时，浏览器行为是打开浏览文件的对话框（不要忘记在标签上添加“for”属性，并将其值设为文件输入字段的id，以使此操作发生）。这样，您几乎可以按任何方式自定义按钮。

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

顺便说一句，类似的技巧也可用于自定义复选框或单选按钮。通过为它们添加标签，单击标签会导致选择复选框/单选按钮。然后可以在某个地方隐藏原生的复选框/单选按钮，并用自定义元素替换它们。

- gwildu

1

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

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

之前：

之后：

- Mateusz Budzisz

1

嗨，这个解决方案并不适用于所有语言，因为该按钮取决于浏览器中选择的语言。 - Sergio Escudero

1

是的，我完全同意你的观点。除了不够稳定之外，这种解决方案非常简单且易于实现。因此，我曾经使用过它，并且可以想象出某些用例。我希望编辑这个答案，解释一下这种方法的所有注意事项。 - Mateusz Budzisz

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ortiga · Accepted Answer

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

创建一个普通输入框和一张图片
创建一个透明度为0的文件上传输入框
当用户点击图片时，模拟点击文件上传输入框
当文件上传输入框的值发生变化时，将其值传递给普通输入框（这样用户就可以看到路径）

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

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