JSFiddle - React, Tailwind, and code Playground

by redoak2000

HTML

<div>
    <label for="user_audio" class="customform-control">Browse Computer</label>
    <input type='file' placeholder="Browse computer" id="user_audio"> <span id='val'></span>
 <span id='button'>Select File</span>

</div>

CSS

* {
    margin:0;
    padding:0;
    font-family: tahoma;
}
body {
    padding: 30px;
}
div {
    width: 400px;
    height: 25px;
    background-color: white;
    box-shadow: 1px 2px 3px #ededed;
    position:relative;
    border: 1px solid #d8d8d8;
}
input[type='file'] {
    width:400px;
    height:25px;
    opacity:0;
    background: none;
    background-image:none;
    border:none;
    outline: none;
}
#val {
    width: 400px;
    height:25px;
    position: absolute;
    top: 0;
    left: 0;
    font-size:13px;
    line-height: 25px;
    text-indent: 10px;
    pointer-events: none;
}
#button {
    cursor: pointer;
    display: block;
    width: 90px;
    background-color: purple;
    height:25px;
    color: white;
    position: absolute;
    right:0;
    top: 0;
    font-size: 11px;
    line-height:25px;
    text-align: center;
    -webkit-transition: 500ms all;
    -moz-transition: 500ms all;
    transition: 500ms all;
}

#button:hover {
    background-color: blue;
}

        .customform-control{
            display: block;
            width:395px;
            padding-top:2px;
            padding-left:2px;
            height:22px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #71706f;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
            border-radius: 0px !important;
        }

JavaScript

$('#button').click(function () {
    $("input[type='file']").trigger('click');
})

$("input[type='file']").change(function () {
    $('#val').text(this.value.replace(/C:\\fakepath\\/i, ''))
    $('.customform-control').hide();
})