JSFiddle - React, Tailwind, and code Playground
HTML
<div style="padding:100px;">
<div class="uploadButton">
<input type="file" />
</div>
</div>
CSS
.uploadButton input[type="file"] {
cursor:pointer;
position:absolute;
top:0px;
opacity:0;
}
.uploadButton {
position:relative;
overflow:hidden;
height:128px;
cursor:pointer;
width:128px;
background:url(http://cdn4.iconfinder.com/data/icons/dellios_system_icons/png_128/arrow-up.png);
opacity:0.5;
}
.uploadButton:hover {
opacity:1;
}
JavaScript
$(function() {
$(".uploadButton").mousemove(function(e) {
var offL, offR, inpStart
offL = $(this).offset().left;
offT = $(this).offset().top;
aaa= $(this).find("input").width();
$(this).find("input").css({
left:e.pageX-aaa-30,
top:e.pageY-offT-10
})
});
});