Hide the browse button on a input type=file

Question

Is there a way to hide the browse button and only leave the text box that works in all browsers?

I have tried setting the margins but they show up different in each

Answer 1

Below code is very useful to hide default browse button and use custom instead:

(function($) {
  $('input[type="file"]').bind('change', function() {
    $("#img_text").html($('input[type="file"]').val());
  });
})(jQuery)

.file-input-wrapper {
  height: 30px;
  margin: 2px;
  overflow: hidden;
  position: relative;
  width: 118px;
  background-color: #fff;
  cursor: pointer;
}

.file-input-wrapper>input[type="file"] {
  font-size: 40px;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  cursor: pointer;
}

.file-input-wrapper>.btn-file-input {
  background-color: #494949;
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  height: 34px;
  margin: 0 0 0 -1px;
  padding-left: 0;
  width: 121px;
  cursor: pointer;
}

.file-input-wrapper:hover>.btn-file-input {
  //background-color: #494949;
}

#img_text {
  float: right;
  margin-right: -80px;
  margin-top: -14px;
}

  

    SELECT FILES