JSFiddle - React, Tailwind, and code Playground

HTML

<input type="file" id="test" name="file"/>

CSS

.upload_file {
	background: #eee;
	border: 1px solid #bbb;
	display: block;
	min-width: 200px;
	overflow: hidden;
	padding-right: 81px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	position: relative;
}
.upload_file input {
	position: absolute;
	left: -9999px;
}
.upload_value {
	float: left;
	width:100%;
}
.upload_value div {
	color: #333;
	font: 14px/32px Arial, Helvetica, sans-serif;
	padding: 0 6px;
	z-index: 99999;
}
.upload_button {
	background: url(https://lh3.googleusercontent.com/-wdrIwnjTGMw/Uzgc9ztYloI/AAAAAAAASUY/KTMQ0m_mzWs/button.png) 50% 50% no-repeat;
	cursor: hand;
	cursor: pointer;
	float: left;
	margin-right: -81px;
	width: 81px;
	height: 32px;
}

JavaScript

(function( $ ) {
	$.fn.extended_itf = function() {
		if ( /msie/.test(navigator.userAgent.toLowerCase()) ) return;
		this.each(function() {
			var obj = $(this);
			var placeholder = obj.is('[placeholder]') ? obj.attr('placeholder') : 'no file selected';
			var upload_value = $('<div class="upload_value"/>').html('<div>'+ placeholder +'</div>');
			var upload_button = $('<div class="upload_button"/>');
			obj.wrap('<label class="upload_file"/>');
			obj.parent().append(upload_value);
			obj.parent().append(upload_button);
			obj.change(function() { upload_value.find('div').text($(this).val()); });
		});
	};
})(jQuery);
$(function() { $('input[type="file"]').extended_itf(); });