我已经从多个地方了解到这个问题。
我尝试了在这里找到的方法：http://www.quirksmode.org/dom/inputfile.html
但我无法使其工作。因此，我尝试了一种CSS/HTML方法，在Firefox、Chrome、Safari和Opera（所有最新版本）中都能够完美运行，但在IE8中不能（你猜对了）。
它看起来很好，但单击时不起作用。如果双击它，它就会起作用。
有什么办法让它可以单击操作吗？
目前，我正在使用IE条件注释来告诉使用IE的用户双击选择按钮。该网站目前正在设计中，尚未向用户发布，希望在发布之前解决这个问题。
一个很好的解决方案是使用label元素，以及它的"for"属性将其与输入框相连，从而实现单击操作。此解决方案的另一个重要元素是在输入框上应用filter:alpha(opacity=0)。
HTML:
<label for="fileupload">
<input id="fileupload" type="file" >
<p>click here</p>
</label>
CSS：
label {
background-color: #ECECEC;
display: block;
width: 600px;
height: 600px;
cursor: pointer;
}
input[type="file"] {
width: 100%;
height: 100%;
z-index: 100;
position: relative;
opacity: 0;
filter:alpha(opacity=0);
cursor: pointer;
}
#outer_div{
cursor:pointer;
overflow:hidden;
display:block;
float:left;
position:relative;
width:83px;
height:25px;
background:url(your button image goes here) no-repeat;
}
请确保您的按钮具有相同的宽度属性，以使此功能正常工作。
接下来是file_input_name的CSS：
#file_input_name{
position:relative;
float:left;
cursor:pointer;
right:138px;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
text-align: right;
}
.file类上使用：filter:alpha（opacity：0），因此隐藏了通常在上传控件中看到的实际“浏览...”按钮。FileAttachment 输入的大小，使隐藏的“浏览...”按钮适合“选择”图像的位置。从那里开始，您只需要确保按钮的z-index属性高于图像的属性即可。<div class="fileUpload btn btn-primary">
<span>上传</span>
<input type="file" class="upload" />
</div>
这将创建一个文件输入框，并使用 Bootstrap css 进行样式设计。 .fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
就这样，现在您拥有了一个带有样式的功能性按钮（文件输入类型）。
我发现这篇文章是因为我遇到了同样的问题，您可以查看更多信息。
input.file{
width:0 ;
height:0;
} //supposing your file input has class of .file`
在 CSS 中，你就可以开始了。
我已经有一段时间没有问这个问题了，下面是我现在用于样式文件输入的方法。这些信息来自Codrops。它提供了更详细的内容并提供了几个示例，但以下是基础知识：
HTML
<input type="file" name="file" id="file" class="inputfile" />
<label for="file">Choose a file</label>
需要检查JS
<html class="no-js">
<head>
<!-- remove this if you use Modernizr -->
<script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1js$2")})(document,window,0);</script>
</head>
</html>
CSS
.js .inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.inputfile + label {
max-width: 80%;
font-size: 1.25rem;
/* 20px */
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
display: inline-block;
overflow: hidden;
padding: 0.625rem 1.25rem;
/* 10px 20px */
}
.no-js .inputfile + label {
display: none;
}
.inputfile:focus + label,
.inputfile.has-focus + label {
outline: 1px dotted #000;
outline: -webkit-focus-ring-color auto 5px;
}
.inputfile + label * {
/* pointer-events: none; */
/* in case of FastClick lib use */
}
.inputfile + label svg {
width: 1em;
height: 1em;
vertical-align: middle;
fill: currentColor;
margin-top: -0.25em;
/* 4px */
margin-right: 0.25em;
/* 4px */
}
JS
;( function ( document, window, index )
{
var inputs = document.querySelectorAll( '.inputfile' );
Array.prototype.forEach.call( inputs, function( input )
{
var label = input.nextElementSibling,
labelVal = label.innerHTML;
input.addEventListener( 'change', function( e )
{
var fileName = '';
if( this.files && this.files.length > 1 )
fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
else
fileName = e.target.value.split( '\\' ).pop();
if( fileName )
label.querySelector( 'span' ).innerHTML = fileName;
else
label.innerHTML = labelVal;
});
// Firefox bug fix
input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); });
input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });
});
}( document, window, 0 ));