Style the file upload button without using javascript

Question

I am working on a website where the client does not want any javascript to be used. I have successfully styled the file update button for my website using the following piece of code.

.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  background: white;
  cursor: inherit;
  display: block;
}

<label class="btn btn-default btn-file">
  Browse
  <input type="file" style="display: none;">
</label>

However, once the file is selected, without using javascript I cannot show the file name next to the button like in the example below.

Any suggestions to do this using the browsers conventional upload button?

Answer 1

By setting the z-index for browse button you can try:

.btn-file {
  position: absolute;
  text-align: center;
  overflow: hidden;
  border-radius: 5px;
  z-index: 2;
  min-width: 84px;
  min-height: 35px;
  background-color: white;
  border: 3px solid cyan;
  top: 0;
  left: 1;
}
input[type=file] {
  float: left;
  position: relative;
  background: white;
  cursor: pointer;
  background-color: white;
}

<label class="btn btn-default ">
  <span class="btn-file">Browse</span> 
  <input type="file">
</label>

OR

The other way is to use bootstrap:

https://jsfiddle.net/wesfe5jy/3/