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
– Jacob Wilson, Commented Sep 30, 2016 at 2:02
Do you have access to the backend and if so what software is being used? — Jacob Wilson
– Jacob Wilson, Commented Sep 30, 2016 at 2:07
Doesn't make sense to reload the page while the user is working. Also is wasting the servers processing time. — Zain Khan
– Zain Khan, Commented Sep 30, 2016 at 2:15

Pooja Kedar · Accepted Answer · 2017-02-01 05:34:52Z

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/

edited Feb 1, 2017 at 5:34

answered Feb 1, 2017 at 5:05

Pooja Kedar

4372 gold badges10 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Style the file upload button without using javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related