Question

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

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

Answer 1

不，你可以做的是一个（丑陋的）解决方法，但很大程度上使用了

创建普通输入和图像
使用不透明度0
当用户单击图像时，您将模拟文件输入的单击
当文件输入改变时，将其值传递给正常输入（因此用户可以看到路径）

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

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

Answer 2

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

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

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

Answer 3

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

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

Answer 4

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

有了这个，它似乎是文件控件本身。但实际上当你点击它时，输入=文件就是单击的文件，然后会出现选择文件的对话框。

Answer 5

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

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

BTW类似的hack可用于自定义复选框或单选按钮。通过为它们添加标签，单击标签会导致选中复选框/ radiobutton。然后可以隐藏原生复选框/ radiobutton，并将其替换为自定义元素。

Answer 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

Answer 7

问这个问题，感觉没有任何答案是正确的。这是我的解决方案：

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

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

Answer 8

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

.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）中测试过。

Answer 9

只需添加否定的文本意图：

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

之前：

之后：

Answer 10

最好的方法

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

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

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

Answer 11

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>

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

11 个答案: