JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="container">
    <div class="row">
        <div class="col-lg-6 col-sm-6 col-12">
             <h4>Input Groups</h4>

            <div class="input-group">
                <input type="text" class="form-control" readonly> <span class="input-group-btn">
                    <span class="btn btn-primary btn-file">
                        Browse&hellip; <input type="file" multiple>
                    </span>
</span>
            </div> <span class="help-block">
                Try selecting one or more files and watch the feedback
            </span>

        </div>
    </div>
</div>
        
<div class="modal-footer" style="">
    <button type="button" class="btn btn-success btn-sm"><span class="glyphicon glyphicon-download"></span> OK</button>
    <button type="button" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
</div>

CSS

.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    background: red;
    cursor: inherit;
    display: block;
}
input[readonly] {
    background-color: white !important;
    cursor: text !important;
}