javascript - Input type=file 在IE8-9中显示不正确

Question

我有一个大元素和许多 css 样式。我的输入文件类型在 ie8 和 ie9 中显示不正确。我只看到背景颜色和文本“浏览...”。因此，当我使用 IE 中的开发工具从样式中排除边框时......它显示正确。但我无法使用 js 或 css 删除边框。当我设置默认值时: border: medium none #000 它不起作用。也许它继承了风格。如何从输入元素中删除边框样式。

有人遇到过这个问题吗？我需要用于输入文件控制的默认按钮。我如何使用 js (jQuery) 或 css？ IE 有元素的原生样式吗？

HTML:

<input name="ImportFileInp$InputField" class="cs-fileinput" id="ImportFileInp_InputField"           type="file"/>

CSS:

.cs-fileinput {
    width: 71px;
    margin-left:5px;
}

但在浏览器中我看到:border: 0px none currentColor

Answer 1

根据我们的讨论，您应该 Customize your upload button 。
问题不仅出现在 IE 浏览器中。每个浏览器对于<input type="file" />都有不同的风格(own style)按钮。

以下是如何自定义上传按钮的一些示例:
HTML代码

<div class="custom-upload">
  <input type="file">
  <div class="fake-file">
      <input disabled="disabled" >
  </div>
</div>

CSS

.custom-upload {
  position: relative;
  height: 40px;
  width: 350px;
  margin:30px;
}

.custom-upload input[type=file] {
  outline:none;
  position: relative;
  text-align: right;    
  -moz-opacity:0 ;
  filter:alpha(opacity: 0);
  opacity: 0;
  z-index: 2;
  width:100%;
  height:100%;  
}

.custom-upload .fake-file {
  background:url(http://www.fold3.com/i/upload-icon.png) center right no-repeat;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 350px;
  padding: 0;
  margin: 0;
  z-index: 1;
  line-height: 100%;
}

.custom-upload .fake-file input {
  font-size:16px;
  height:40px;
  width:300px;
}

JavaScript 代码

$('.custom-upload input[type=file]').change(function(){
  $(this).next().find('input').val($(this).val());
});

因此，您只需更改 .custom-upload .fake-file 中的背景即可。为您想要的任何图像分类，它将在所有浏览器中具有相同的 View 。