为什么这个 css 不能在 Firefox 上运行？答案

【问题标题】：Why this css is not working on Firefox?为什么这个 css 不能在 Firefox 上运行？
【发布时间】：2016-06-10 01:03:49
【问题描述】：

我正在尝试更改输入类型文件的样式。跟随 CSS 在 Chrome 和 Opera 上运行良好，但在 Mozilla Firefox 上运行不佳。

HTML

<input type="file" class="custom-file-input" />

CSS

.custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
  content: 'UPLOAD';
  display: inline-block;
  background: -webkit-linear-gradient(top, black, red);
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  font-size: 10pt;
 color:#fff;
}
.custom-file-input:hover::before {
  border-color: #fff;
}
.custom-file-input:active::before {
color:#666;
  background: -webkit-linear-gradient(top, bclack, red);
}

http://jsfiddle.net/Rameshpardhi/3agapfw3/

我也把我的风格改成了这样：

.custom-file-input::-moz-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
  content: 'UPLOAD';
  display: inline-block;
  background: -moz-linear-gradient(top, black, red);
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px;
  outline: none;
  white-space: nowrap;
  -moz-user-select: none;
  cursor: pointer;
  font-size: 10pt;
 color:#fff;
}
.custom-file-input:hover::before {
  border-color: #fff;
}
.custom-file-input:active::before {
color:#666;
  background: -moz-linear-gradient(top, bclack, red);
}

但它仍然无法正常工作。我想知道为什么这个 css 不能在 Mozzila 上运行？

【问题讨论】：

尝试将 -moz- 放在这样的属性前面：-moz-linear-gradient(top, bclack, red);
解释出了什么问题以及应该发生什么
How can I style a file input field in Firefox?的可能重复
没有-webkit-file-upload-button的firefox版本：developer.mozilla.org/en-US/docs/Web/CSS/Reference/…
我不知道它是否重复，但我不是在问如何设置输入类型文件的样式，我要问的是为什么这个 css 在 mozilla 上不起作用？

标签： html css firefox input-type-file

【解决方案1】：

我不知道这是否是您所期望的，但您的按钮有一个跨浏览器版本，它使用了<label> 技巧。随意调整 CSS（如果您不使用 SASS，请单击“查看已编译”）。

http://codepen.io/mbrillaud/pen/LVEgBy

【讨论】：

有没有办法只用 css 做到这一点？
你需要JS来获取输入的值，因为输入是隐藏的。没有它，该按钮仍然有效，但您将看不到您选择了哪个文件。

【解决方案2】：

注意到-webkit- 声明了吗？这仅适用于 Chrome 和 Opera。将它们加倍并用-moz- 替换它们或完全删除它们。

尝试在您的代码上运行 autoprefixer 以获得正确的代码。

注意：推荐的结构是在输入字段周围有一个标签并设置其样式。

【讨论】：

【解决方案3】：

Mozilla 没有以 ::-webkit-form-upload-button 为前缀的供应商的等效项。它是专有的（即非标准），仅在基于 Webkit 和 Chromium 的浏览器中受支持。

您可以在 IE 中获得相对奇偶校验：https://www.tjvantoll.com/2013/04/15/list-of-pseudo-elements-to-style-form-controls/#input_file

【讨论】：