Hide the file input using css, create a disabled text input to display file name once selected, use custom button to trigger file browse click. After file is selected, JS grabs value and inserts into text field.

custom-upload.html

<span class="custom-upload">
  <i class="icomoon-upload"></i>
	<input type="file" name="receipt" id="receipt" class="in-lrg">
	<input type="text" name="file-name" id="file-name" class="in-lrg" disabled>
</span>

custom-upload.js

$('form.form-add-service input[type=file]').live('change', function(){
  $(this).siblings('input').val($(this).val().replace('C:\\fakepath\\',''));
});
$('form.form-add-service .custom-upload i').click(function(){
  $(this).siblings('input[type=file]').trigger('click');
});

custom-upload.scss

  .custom-upload {
		position: relative;
		background: #717174;
		width: 526px;
		height: 25px;
		cursor: pointer;
		display: block;
		@include transition-property(all);
		@include transition-duration(.5s);
		&:hover {
			background: #2199C4;
			@include transition-duration(0);
			input[name=file-name] {
				border-color: #2199C4;
				@include transition-duration(0);
			}
		}
		input[name=receipt] {
			display: none;
		}
		input[name=file-name] {
			position: absolute;
			top: 0px;
			left: 33px;
			width: 485px;
			@include transition-property(all);
			@include transition-duration(.5s);
		}
		i {
			font-size: 26px;
			color: #fff;
			position: relative;
			z-index: 1;
		}
	}