Upload input Styling

Upload input Styling

<label class="file_upload">
   <span class="button">Choose</span>
   <mark>The file is not selected</mark>
   <input type="file"/>
</label>

<style>
// File upload inputs styles
		.file_upload{
			background: #fff;
			display: block;
			position: relative;
			overflow: hidden;
			font-size: 16px;
			height: 36px;
			line-height: 36px;
			border-radius: 4px;
		}
		.file_upload .button, .file_upload > mark{
			display: block;
			cursor: pointer;
			font: 400 13px/32px $main_font;
			color: #000;
		}
		.file_upload .button{
			float: right;
			box-sizing: border-box;
			width: 100px;
			height: 100%;
			font: 400 13px/38px $main_font;
			letter-spacing: .2em;
			text-transform: uppercase;
			text-align: center;
			background: $light-yellow;
			color: #000;
			border-top-right-radius: 4px;
			border-bottom-right-radius: 4px;
		}
		.file_upload > mark{
			background: transparent;
			padding-left: 12px;
			padding-right: 105px;
		}
		.file_upload input[type=file]{
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			position: absolute;
			top: 0;
			opacity: 0
		}
</style>

<script>
uploadProcessing(selector);

function uploadProcessing('.file_upload') {
  
  if(selector == undefined) {
    return false;
  }

	$(selector).each(function (index, elem) {
		
		var wrapper = $(elem),
			inp = wrapper.find( "input" ),
			lbl = wrapper.find( "mark" );
		
		// Crutches for the :focus style:
		inp.focus(function(){
			wrapper.addClass( "focus" );
		}).blur(function(){
			wrapper.removeClass( "focus" );
		});
		
		var file_api = ( window.File && window.FileReader && window.FileList && window.Blob ) ? true : false;
		
		inp.change(function(){
			var file_name;
			if( file_api && inp[ 0 ].files[ 0 ] )
				file_name = inp[ 0 ].files[ 0 ].name;
			else
				file_name = inp.val().replace( "C:\\fakepath\\", '' );
			
			if( ! file_name.length )
				return;
			
			if( lbl.is( ":visible" ) ){
				lbl.text( file_name );
				lbl.attr( 'title', file_name );
			}
		}).change();
	  
		$( window ).resize(function(){
			$(elem).find("input").triggerHandler( "change" );
		});
	});/* End each */
  
}
</script>