<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <h1>hTrixx Framework [ file input ]</h1> <h3>Ignore the body and * class for your project</h3> <hr> <p>Select a color from here to preview</p> <div class="btn-group"> <button onclick="changeColor(id)" id="aqua" class="btn " style="background-color:#2196F3;color:#fff">Aqua</button> <button onclick="changeColor(id)" id="crimson" class="btn " style="background-color:crimson;color:#fff">Crimson</button> <button onclick="changeColor(id)" id="black" class="btn " style="background-color:black;color:#fff">Black</button> <button onclick="changeColor(id)" id="green" class="btn " style="background-color:#00E676;color:#fff">Green</button> </div> <p>You can also change the colors as you want in css</p> <input class="file__upload" type="file" name="" id="file" hidden /> <label class="file__upload__label" for="file" id="selector">Select File</label>

*{ margin: 0; box-sizing: border-box; font-family: sans-serif; } body{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .file__upload__label{ transition: all 0.2s linear; padding: 16px 40px; border: 2px solid grey; border-radius: 5px; text-transform: uppercase; letter-spacing: 2px; max-width: 350px; } .file__upload__label:hover{ border: 2px solid tomato; color: tomato; cursor: pointer; box-shadow: grey 0px 0px 25px -10px; } .label__active{ padding: 16px 20px; border: 2px solid tomato; color: tomato; cursor: pointer; box-shadow: grey 0px 0px 25px -10px; } .file__upload__label span{ font-weight: lighter; } /*This part is just for colors. It's not mandatory*/ .aqua:hover{ color:#2196F3!important; border: 2px solid #2196F3!important; } .crimson:hover{ color:crimson!important; border: 2px solid crimson!important; } .black:hover{ color:#000!important; border: 2px solid #000!important; } .green:hover{ color:#00E676!important; border: 2px solid #00E676!important; }

var loader = function(e){ let file = e.target.files; let show = "<span>Filename: </span>" + file[0].name; let output = document.getElementById("selector"); output.innerHTML = show; output.classList.add("label__active"); } let fileInput = document.getElementById("file"); fileInput.addEventListener("change",loader); //This part is for buttons to change the color of the file input //You can copy just the top part if you don't want to change the colors function changeColor(id){ $("#selector").removeClass(); $("#selector").addClass("file__upload__label").addClass(id); }