Customize File Browse Button Styling with CSS

The HTML Markup

<label  class="custom-file-input">
	<input type="file">
</label>
<label  class="custom-file-input file-blue">
	<input type="file">
</label>

The CSS

<style>
	.custom-file-input {
		display: inline-block;
		position: relative;
		color: #533e00;
	}
	.custom-file-input input {
		visibility: hidden;
		width: 100px;
	}
	.custom-file-input:before {
		content: 'Choose File';
		display: block;
		background: -webkit-linear-gradient( -180deg, #ffdc73, #febf01);
		background: -o-linear-gradient( -180deg, #ffdc73, #febf01);
		background: -moz-linear-gradient( -180deg, #ffdc73, #febf01);
		background: linear-gradient( -180deg, #ffdc73, #febf01);
		border: 3px solid #dca602;
		border-radius: 10px;
		padding: 5px 0px;
		outline: none;
		white-space: nowrap;
		cursor: pointer;
		text-shadow: 1px 1px rgba(255,255,255,0.7);
		font-weight: bold;
		text-align: center;
		font-size: 10pt;
		position: absolute;
		left: 0;
		right: 0;
	}
	.custom-file-input:hover:before {
		border-color: #febf01;
	}
		.custom-file-input:active:before {
		background: #febf01;
	}
	.file-blue:before {
		content: 'Browse File';
		background: -webkit-linear-gradient( -180deg, #99dff5, #02b0e6);
		background: -o-linear-gradient( -180deg, #99dff5, #02b0e6);
		background: -moz-linear-gradient( -180deg, #99dff5, #02b0e6);
		background: linear-gradient( -180deg, #99dff5, #02b0e6);
		border-color: #57cff4;
		color: #FFF;
		text-shadow: 1px 1px rgba(000,000,000,0.5);
	}
	.file-blue:hover:before {
		border-color: #02b0e6;
	}
	.file-blue:active:before {
		background: #02b0e6;
	}
</style>

The javascript for display selected file name

document.getElementById("uploadBtn").onchange = function () {
    document.getElementById("uploadFile").value = this.value;
};

The html: Upload button with selected file

<input id="uploadFile" placeholder="Choose File" disabled="disabled" />
<label  class="custom-file-input" >
<input type="file" id="uploadBtn">
</label><input id="uploadFile" placeholder="Choose File" disabled="disabled" />
<label  class="custom-file-input" >
<input type="file" id="uploadBtn">
</label>