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?

Just my thoughts, but you could have a listener on the server side for when the file is uploaded, modify the page. For instance, when the file is uploaded, reload the page and when the request for the page is sent, include the name of the file as a parameter for when the page is rendered. — Jacob Wilson, Sep 30 '16 at 02:02
Do you have access to the backend and if so what software is being used? — Jacob Wilson, Sep 30 '16 at 02:07
Doesn't make sense to reload the page while the user is working. Also is wasting the servers processing time. — Zain Khan, Sep 30 '16 at 02:15

Pooja Kedar · Answer 1 · 2017-02-01T05:34:52.880

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/

Style the file upload button without using javascript

1 Answers1