JSFiddle - React, Tailwind, and code Playground

HTML

<div id="FileUpload">
    <input type="file" size="24" id="BrowserHidden" onchange="getElementById('FileField').value = getElementById('BrowserHidden').value;" />
    <div id="BrowserVisible"><input type="text" id="FileField" /></div>
</div>

CSS

body {
	margin-left:50px;
    margin-top:20px;
}
#FileUpload {
    position:relative;
}

#BrowserVisible {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    background:url(http://i.stack.imgur.com/PaT3a.png) 100% 1px no-repeat;
    width:345px;
	height:30px;
}

#FileField {
    width:250px;
    margin-right:85px;
	padding: 6px;
    font-size: 13px;
    background: #fff url('http://i.stack.imgur.com/CGQD7.gif') top left repeat-x;
    border: 1px solid #d5d5d5;
	color: #333;
	border-radius: 4px 4px 4px 4px !important;
}

#BrowserHidden {
    position:relative;
    width:345px;
	height:30px;
    text-align: right;
    -moz-opacity:0;
    filter:alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
	
}