JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<form action="#" class="example">
<div class="fileinputs">  
<input type="file" name="img" class="file">  
<div class="fakefile">  
<input id="targetInput">  
  <img src="http://kachibito.net/wp-content/themes/kachi3/images/Gear.png">  
 </div>  
</div> 
</form>

CSS

div.fileinputs {  
 position: relative;  
 height:20px;  
}  
  
div.fakefile {  
 position: absolute;  
 top: 0px;  
 left: 0px;  
 z-index: 1;  
}  
  
input.file {  
 position: relative;  
 text-align: right;  
 -moz-opacity:0 ;  
 filter:alpha(opacity: 0);  
 opacity: 0;  
 z-index:2;  
}

JavaScript

$(function(){  
 $(".file").change(function(){  
 $("#targetInput").val($(".file").val());  
 });  
});