JSFiddle - React, Tailwind, and code Playground

by Alexandr Kudryavtsev

HTML

<div class="custom_file">
        <input type="file" />
    </div>

CSS

.custom_file input[type="file"] {
    cursor:pointer;
    position:absolute;
    top:0px;
    opacity:1;
    cursor:pointer;
}

.custom_file {
    position:relative;
    overflow:hidden;
    height:119px;
    cursor:pointer;
    width:119px;  ...

JavaScript

$(function() {
    $(".custom_file").mousemove(function(e) {
        var offL, offR;
        offL = $(this).offset().left;
        offT = $(this).offset().top;
        $(this).find("input").css({
            left:e.pageX-offL,
            top:e.pageY-offT
        })
    }); 
});