Custom File Input

CSS

.form__input-file {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  z-index: -1;
}
.form__input-file + .label-file {
  margin-top: 1px;
  padding: 9px 20px 8px;
  font-size: 14px;
  font-weight: 300;
  color: #898989;
  border: 1px solid #bcbcbc;
  background-color: #fff;
  display: inline-block;
}
.form__input-file:focus + .label-file,
.form__input-file + .label-file:hover {
  background-color: #fbfbfb;
}
.form__input-file + .label-file {
  cursor: pointer;
}

HTML

<p class="form__guard form__guard--more">Прикрепить резюме:</p>
<input type="file" name="file-vacancy" id="file-vacancy" class="form__input-file" data-multiple-caption="{count} файлов выбрано" multiple="">
<label for="file-vacancy" class="label-file"><span>Выберите файл</span></label>

Js

$( '.form__input-file' ).each( function()
	{
		var $input	 = $( this ),
			$label	 = $input.next( 'label' ),
			labelVal = $label.html();

		$input.on( 'change', function( e )
		{
			var fileName = '';

			if( this.files && this.files.length > 1 )
				fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
			else if( e.target.value )
				fileName = e.target.value.split( '\\' ).pop();

			if( fileName )
				$label.find( 'span' ).html( fileName );
			else
				$label.html( labelVal );
		});

		// Firefox bug fix
		$input
		.on( 'focus', function(){ $input.addClass( 'has-focus' ); })
		.on( 'blur', function(){ $input.removeClass( 'has-focus' ); });
	});