Обновление 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;
});
});
Но на самом деле просто прочитайте учебник и скачайте демо, это действительно хорошо.