Question

我尝试了许多不同的技巧来设计input[type="button"]内input[type="file"]的样式。

我找到了一种使用纯CSS的技术，允许用户查看他们选择的文件名。但是，它遗漏了一个特别受欢迎的浏览器，firefox。

我找到了几种方法来做＆＃34;做＆＃34;这可以通过使用JS或直接隐藏文件名的输出框来实现。

链接到JS或隐藏方法。：

www.quirksmode.org
www.shauninman.com
www.appelsiini.net

我在chrome中完全偶然发现的纯CSS方法，然后在styling an input type file button的答案中再次找到

此CSS方法的工作原理是通过pseudo类选择元素。

在Google Chrome中，这可以通过以下方式完成：

input.formelement::-webkit-file-upload-button {background-color: #443}

其中，input.formelement是我的文件上传表单的类，-webkit-file-upload-button是特定于浏览器的伪元素。

在Internet Explorer（10+）中，这可以通过以下方式完成：

input.formelement::-ms-browse {background-color: #443}

再次，input.formelement是我的文件上传表单的类，-ms-browse是特定于浏览器的伪元素。

有没有办法在没有Javascript的情况下在FireFox中执行此操作？

Answer 1

我不相信只有使用CSS才能在Firefox中执行此操作。

也无法设置或更改文字＆＃34;未选择任何文件。＆＃34;该文件名标签在各种浏览器中的显示方式也不同。

如果你真的想要一个跨浏览器的解决方案，你最好的选择仍然是使用假的＆＃34;按钮＆＃34;触发实际隐藏按钮的点击。使用JS可能是显而易见的选择，但不是唯一的方法：

JS方法：

＆＃13;

// JS - DOM Elements
var browse_button = document.getElementById('browse-button');
var file_input = document.getElementById('file-input');

// Handler to trigger click on file input
browse_button.addEventListener('click', function(e) {
   file_input.click();
});

＆＃13;

/* CSS to hide file input */
#file-input {
  display: none;
}
#browse-button {
  /* TODO: styles */
}

＆＃13;

<!-- Simple HTML -->
<input type="file" id="file-input" />
<button type="button" id="browse-button">Browse</button>

＆＃13;

纯HTML / CSS方法：

简单的HTML + CSS也可以使用，特别是如果您不需要＆＃34;文件名标签＆＃34;。一个快速脏的HTML + CSS解决方案：

＆＃13;

* {
  box-sizing: border-box;
}
input[type=file] {
  position: absolute;
  top:-5px; /* size of border */
  left:-5px; /* size of border */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 240px;
  height: 50px;
  border: 1px solid red;
  opacity: 0; /* hide actual input */
  cursor: pointer
}

.fakeFileButton {
  position: relative;
  margin: 0;
  padding: 0;
  width: 240px; /* same as button */
  height: 50px; /* same as button */
  background-color: rgb(50,50,238);
  border: 5px solid rgb(128,128,128);
  font-size: 18px;
  color: rgb(255,255,255);
  text-align: center;
  line-height: 40px;
}
.fakeFileButton:hover {
  background-color: rgb(100,150,255);
  color: rgb(0,0,0);
}

＆＃13;

<div class="fakeFileButton">
    Browse File on Computer
    <input type="file">
</div>

＆＃13;

如果你想添加一个假的文件名标签，它也是可能的，但你必须使用JS设置一个处理程序来观察change事件，并使用一个回调函数来读取{ {1}}并将其写入real_input.value。

Answer 2

对于在 2020 年代发现此问题的任何人，从 Firefox 82 开始，您可以使用 ::file-selector-button 伪元素。值得注意的是，现在 Chromium 和 Safari 也支持此功能。

如何在FireFox中使用纯CSS设置HTML文件上传按钮的样式

在Google Chrome中，这可以通过以下方式完成：

在Internet Explorer（10+）中，这可以通过以下方式完成：

2 个答案: