2017年更新：
我已经研究了如何实现这一目标。最好的解释/教程在这里：https：
//tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/
我将在此处编写摘要，以防万一它不可用。因此，您应该具有HTML：
<input type="file" name="file" id="file" class="inputfile" />
<label for="file">Choose a file</label>
然后使用CSS隐藏输入：
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;}
然后设置标签样式：
.inputfile + label {
font-size: 1.25em;
font-weight: 700;
color: white;
background-color: black;
display: inline-block;
}
然后可以选择添加JS以显示文件名：
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;
});
});
但实际上只是阅读了教程并下载了演示，这真的很好。
