JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<div class="mob_pass">
    <label class="ctm_fnt">Attach document</label>
    <br>
        <div class="custom-file-input">
            <input type="file">
                <input type="text" class="txt_field ctm_widt" placeholder="Attached File">
                    <button class="cst_select">
                        <i class="fa  fa-rotate-90"></i> Attach
                    </button>
                    </div>
                </div>

CSS

.custom-file-input{
    display: inline-block;
    overflow: hidden;
    position: relative;
    padding-top: 0px;
}
.custom-file-input input[type="file"]{
    width: 100%;
    height: 100%;
    opacity: 0;
    filter: alpha(opacity=0);
    zoom: 1;  /* Fix for IE7 */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
}

JavaScript

$('.custom-file-input input[type=file]').change(function(){
    $(this).next().find('input').val($(this).val());
});