file upload button not supported in all the browsers

Question

I have created a file upload with search button at the right side. This one is showing correctly in chrome only, but I need this to support all modern browsers. I have tried in Mozilla where this is not being supported. Can anybody please help me to solve this. Thank You.

@import url(https://fonts.googleapis.com/css?family=Roboto);
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 16px
}

body {
  background-color: #fff;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
}

.container {
  margin: 20px auto;
  max-width: 1140px;
  padding: 25px 25px;
  border: 1px solid #000;
}

.row {
  clear: both;
}

#myInput {
  width: 85%;
  border: 1px solid #000;
  display: inline-block;
}

input[type=file]::-webkit-file-upload-button {
  width: 0;
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
  border: none;
  border: 0px;
}

x::-webkit-file-upload-button,
input[type=file]:after {
  -webkit-appearance: button;
  border-collapse: separate;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  content: 'Search';
  color: #080708;
  background: #e3e3e3;
  text-decoration: none;
  display: inline-block;
  left: 100%;
  margin-left: 50px;
  position: relative;
  padding: 10px 46px 10px 40px;
}

@media only screen and (max-width: 767px) {
  .container {
    width: 100%;
    padding: 15px;
  }
  #myInput {
    width: 64%;
  }
  .btn-View {
    width: 10%;
  }
  table td {
    padding: 12px;
  }
}

<div class="container">
  <div class="row">
    <input type="file" name="myInput" id="myInput">
  </div>
</div>

You need to make a custom one as those properties only work in webkit browsers ... Possible duplicate http://stackoverflow.com/questions/572768/styling-an-input-type-file-button — Asons, Mar 19 '17 at 15:18
@Dražen You obviously misunderstood the question ... and `-moz` does not work _instead_ of `-webkit` for cross browser support, and in this case it is _only_ in `webkit` this property exists — Asons, Mar 19 '17 at 15:46
https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions — Dražen, Mar 19 '17 at 15:49
@Dražen Nope, no `file-upload-button` property for Mozilla there — Asons, Mar 19 '17 at 15:54
Oh sorry, noone cares about -moz, its all properties are supported in every modern browser anyway, aren't they? — Dražen, Mar 19 '17 at 17:13
@Dražen No, they are not all supported without `-moz`, so you need to read up on that some more. — Asons, Mar 19 '17 at 17:44
Little reminder; "@Dražen Does -moz work on all modern browsers?" — Dražen, Mar 19 '17 at 19:12

score 2 · Answer 1 · edited Mar 20 '17 at 06:23

You can make it work in many ways.

The simple way if you do not need the file name to be seen, using the input file along with the label is the quickest way.
- https://codepen.io/anupkumarmaharjan/pen/mWXbVj
Using the javascript can be handy. Go through these links for better understandings.
- https://codepen.io/anupkumarmaharjan/pen/NpyKPm
- https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way

file upload button not supported in all the browsers

1 Answers1