为什么这个 css 在 Firefox 上不起作用？

Question

我正在尝试更改输入类型文件的样式。以下 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 上不起作用？

Answer 1

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

尝试运行对您的代码进行自动前缀以获取正确的代码。

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

Answer 2

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

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

Answer 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

为什么这个 css 在 Firefox 上不起作用？

Why this css is not working on Firefox?

html

css

firefox

input-type-file