Custom File Input with CSS, Extra Markup and Little JavaScript

by Taufik Nurrohman

HTML

<div class="custom-file-input">
  <span></span>
  <span>Browse<input type="file"/></span>
</div>

<div class="custom-file-input">
  <span></span>
  <span>Browse<input type="file"/></span>
</div>

CSS

body {padding:50px 70px}

.custom-file-input {
  display:inline-block;
  position:relative;
  width:250px;
  height:30px;
  background-color:black;
  color:white;
  font:normal normal 13px/30px Helmet,FreeSans,Sans-Serif;
  border-radius:3px;
  overflow:hidden;
  cursor:text;
}

.custom-file-input input {
  /* sembunyikan dengan `opacity:0` */
  opacity:0;
  filter:alpha(opacity=0);
  /* pastikan elemen ini selalu berada di sebelah atas */
  display:block;
  position:absolute;
  top:0;
  right:0;
  margin:0;
  padding:0;
  font-size:2000%;
  z-index:4;
  cursor:pointer;
}

.custom-file-input span {
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  padding:0 10px;
  overflow:hidden;
}

.custom-file-input span + span {
  left:auto;
  background-color:#234;
  border-radius:0 3px 3px 0;
  padding:0 15px;
  box-shadow:0 0 3px black,0 0 10px black;
}


/* Dora the Explorer */

.custom-file-input input::-ms-value {display:none}

.custom-file-input input::-ms-browse {
  display:block;
  margin:0;
  padding:0;
  cursor:inherit;
}

JavaScript

(function() {
    var input = document.getElementsByClassName('custom-file-input');
    for (var i = 0, len = input.length; i < len; ++i) {
        var theInput = input[i].getElementsByTagName('input')[0];
        theInput.onchange = function() {
            this.parentNode.parentNode.children[0].innerHTML = this.value;
            this.title = this.value;
        };
    }
})();