Geek Answers Handbook

File upload button style without using javascript

I work on a website where the client does not want to use javascript . I have successfully developed a file update button for my site using the following code snippet.

.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, as in the example below.

enter image description here

Any suggestions for this using the regular browser download button?

+6
source share
1 answer

By setting the z-index for the 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

Another way is to use bootstrap:

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

+1
source

More articles:


All Articles