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-替换它们或完全删除它们。

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

注意：推荐的结构是在输入字段和样式周围添加标签。

Answer 2

我不知道这是否符合您的期望，但是您的按钮的跨浏览器版本使用<label>技巧。随意调整CSS（如果你不使用SASS，点击'查看编译'）。

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

Answer 3

Mozilla没有相应的供应商前缀SELECT ID_USER FROM USERS WHERE ID_USER_GROUP = '003008' HAVING COUNT(ID_USER) = ( SELECT COUNT(ID_USER) FROM USERS WHERE ID_USER_GROUP = '003008' AND DT_USER_LOGIN IS NOT NULL )。它是专有的（即非标准的），仅在Webkit＆amp;基于Chromium的浏览器。

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

为什么这个css不适用于Firefox？

3 个答案: