Question

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

有人有这个问题吗？我需要输入文件控制的默认按钮。我如何使用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" />按钮的不同样式（自己的样式）。

以下是一些如何自定义上传按钮的示例：
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类中的背景信息更改为您想要的任何图像，并且它将在所有浏览器中具有相同的视图。

输入类型=文件在IE8-9中显示不正确

1 个答案: