Custom Input type File HTML/CSS/JS

CustomInputFile.txt

//link      https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

//html
<input style="margin-left:auto; margin-right:auto; color:#000000;" type="file" name="orderfiles" id="orderfiles" class="inputfile" data-multiple-caption="{count} ficheiros selecionados" multiple />
<label id="label_orderfiles" for="orderfiles">
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
    <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"></path>
  </svg>
  <span>Escolha um ficheiro</span>
</label>

//js
<script>
  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;

        label.style.color = "gold";
    });
  });
</script>

//css
/* Input Type Files Change Deafult View for all browsers
------------------------------------------------------------- */

#orderfiles{
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}


#label_orderfiles{
	cursor: pointer;
	color: black;
	font-size: 16px;
	background-color: white;
	border-radius: 6px;
	padding: 3px;
}

#orderfiles:focus + #label_orderfiles,
#label_orderfiles:hover {
    color: #55a9ea;
		background-color: #D7D7D7;
		outline: 1px dotted #000;
		outline: -webkit-focus-ring-color auto 5px;
}