<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>
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; }
(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; }; } })();